Как сделать постепенное отображение изображений | jQuery lazy load plugin

Как сделать постепенное отображение изображений | jQuery lazy load plugin | n-wp.ru Плагины

Блоги с обилием графики, множеством больших картинок грузятся долго — пока все изображения подгрузятся…. Частично можно решить проблему с загрузкой изображений с помощью правильно настроенного браузерного кэширования. Например, плагин W3 Total Cache имеет в настройках такое кэширование. Можно настроить браузерное кэширование изображений и самостоятельно, без дополнительных плагинов. В этом случае браузер будет закачивать изображения из блога к себе в кэш один раз. При последующих обращениях к этому изображению он будет его подгружать не с сайта, а из своего кэша. Таким образом можно уменьшить нагрузку на сервер и увеличить скорость загрузки страниц блога, ведь загрузить изображение из кэша, который хранится на компьютере, всегда легче, нежели чем тянуть изображение каждый раз заново из интернета. Сейчас стала распространенной и другая технология, позволяющая увеличить скорость загрузки страниц — так называемая ленивая загрузка.

Как сделать постепенное отображение изображений | jQuery lazy load plugin

Ленивой загрузка названа потому, что изображения загружаются на странице не все сразу, а только по мере необходимости. Если вы смотрите верхнюю часть страницы, то изображения, расположенные на нижней, невидимой части страницы, не загружаются. Действительно, зачем они вам нужны, если вы их не видите? Они будут подгружаться по мере их отображения на странице.

В итоге время загрузки страницы резко сокращается. Я использую ленивую загрузку на сайте tiaurus.info — на нем просто море больших картинок, и такая загрузка спасает от лишней нагрузки, существенно сокращая время на загрузку страницы (а на некоторых страницах расположены сотни изображений).

Чтобы добавить ленивую загрузку, можно воспользоваться плагином jQuery lazy load plugin. Он работает в полностью автоматическом режиме.

Скачать jQuery lazy load plugin

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. TAIFUN

    С изображений на JS) Тоже не стоит обильно пичкать JS. Вижу, что поставили на этот блог. А как же кеширование в браузере?! Вот я перешел из этой страницы на другую, потом по ссылке опять вернулся и снова изображения загружаются по новой.. или я ошибаюсь?

    Ответить
    1. jQuery lazy load plugin не влияет на кэширование, только на отображение картинок на странице. При браузерном кэшировании если картинка загружается впервые, то она берется с сайта, если повторно — то из кэша браузера.

      Ответить
  2. Erik

    как настроить браузерное кеширование???

    Ответить
    1. Как настроить браузерное кэширование — https://n-wp.ru/kak-umenshit-nagruzku-na-server-optimizaciya-htaccess/

      Ответить
  3. Ден

    Уже не пригоден. В WP 3.0.4 не удалось завести. А отдельно эффект не работает в FireFox и Seamonkey, однако отработал точно в IE8

    Ответить
    1. tiaurus

      Прекрасно работает в WP 3.0.4

      Ответить
  4. himin

    Можно как то настроить, чтобы ленивой загрузкой загружался только контент, а сайдбар бы нормально грузился?

    вроде настраивать надо в файле jq_img_lazy_load.php

    jQuery("img").not(".cycle img").lazyload({

    но что точно прописать не знаю

    Ответить
  5. himin

    Все оказалось просто, чтоб в сайдбаре картикни грузились без этого эффекта меняем

    jQuery("img").not(".cycle img").lazyload({

    на

    jQuery("img").not("#sidebar img").lazyload({
    Ответить