Июл

Плагин jQuery Image Lazy Loader WP — постепенная загрузка изображений

Некоторое время назад в wordpress inside я опубликовал просто потрясающую и очень полезную подборку WordPress плагинов для изображений, которая собрала много позитивных откликов и упоминаний. Часть из них я уже успел попробовать установить и настроить для своих блогов. Сегодня речь пойдет об одном из таких плагинов, точнее о самом первом среди той двадцатки — jQuery Image Lazy Loader WP.

Обновление 28.07.2017: Есть более актуальная статья, где представлено сразу 8 плагинов ленивой загрузки изображений (Lazy Load). Кроме того, вы узнаете как именно работает данная технология и убедитесь в ее эффективности.

Предыстория к статье очень простая – недавно я публиковал в дизайн блоге design-mania.ru один урок по фотошопу, и там оказалось очень много картинок. По умолчанию при загрузке страницы поста все эти изображения начинали подгружаться и создавали некоторую задержку для пользователей с не очень быстрым интернетом. В этот момент я и вспомнил про jQuery Image Lazy Loader WP. Более того, я видел как этот плагин использовался на достаточно популярных, посещаемых англоязычных блогах, что окончательно убедило меня попробовать его поставить себе.

Плагин Lazy Loader

Итак, Lazy Loader позволяет отображать картинки для поста не все сразу а по мере прокрутки страницы. То есть, например, у вас есть статья про красивые дизайнерские блоги с кучей иллюстраций, пользователь, заходя на нее, увидит лишь часть изображений, расположенных сверху. По мере движения вниз статьи новые картинки будут подгружаться и становиться доступными для просмотра, посетителям сайта не придется ждать полной загрузки все страницы сразу. Частенько бывает, когда люди заходят на сайт и после 10-20 секунд безуспешного ожидания загрузки страницы просто ее закрывают – чтобы этого не случилось из-за большого количества изображений, можно попробовать установить jQuery Image Lazy Loader WP.

Установка плагина jQuery Image Lazy Loader WP не подразумевает ничего сложного, скачиваем его отсюда, разархивируем и копируем файлы модуля на фтп в директорию wp-content/plugins. Далее по традиции заходим в раздел плагинов админки и активируем jQuery Image Lazy Loader WP. После этого заходим на страницы своего сайта и проверяем плагин в действии. Есть разные варианты исполнения и реализации загрузки – с эффектом или без.

Для плагина jQuery Image Lazy Loader WP по умолчанию установлен эффект плавного возникновения изображения в процессе прокрутки страницы. Можно будет немного подправить эти настройки по умолчанию – найдете их в файле jq_img_lazy_load.php, строки:

$("img").lazyload({
     placeholder : "img/grey.gif",       
     effect      : "fadeIn"
 });

Здесь, во-первых, можно закомментировать или убрать строку с effect, в результате чего картинки будут загружаться стразу моментально без всяких эффектов. Во-вторых, можно поменять файл фона grey.gif на любой другой (при этом, конечно, нужно предварительно его загрузить на ФТП).

Что могу сказать из личного опыта использования плагина jQuery Image Lazy Loader WP – так сказать первые впечатления. Выглядит все весьма неплохо, но эффект загрузки фотографий распространяется на все изображения блога – рекламу, баннеры, аватары, тизеры и т.п. В результате такого пару раз у меня возникала ситуация со следующим глюком:

А это, безусловно, не очень хорошо.

Исходя из увиденного, мне кажется плагин jQuery Image Lazy Loader WP более уместен для полноценных фотоблогов с большим количеством изображений. В Дизайн Мании, по сути, единственным подходящим для него местом есть раздел фотографии для вдохновения, в остальном его работа не особо нужна. Поэтому, скорее всего, я дальше немного потестирую работу модуля и отключу его.

P.S. Постовой. Хочешь отдохнуть?. В «Ореанде» вы почувствуете, что отдых в Ялте – это заряд энергии на весь год. Только яркие впечатления.

Оцените статью:

(голосов - 9, средний балл: 4,67 из 7)

Загрузка...

Категории: Оптимизация; Плагины;

Теги: изображения, обзоры плагинов, оптимизируем работу, правка плагинов, установка.

комментариев 19 к статье “Плагин jQuery Image Lazy Loader WP — постепенная загрузка изображений”

Oleg Mykhailenko 29.07.2010
Круто! Давно заметил эту фишку с подгрузкой изображений на буржуйских блогах)
Надо и себе попробовать) Спасибо!
eminkoff 29.07.2010
Оу, спасибо, как раз искал как это сделать, но нашел лишь способ с кучей кода, правда там была подгрузка всей страницы постепенно при скроллинге.
Александр-HIMиk 29.07.2010
В наше время высокоскоростного безлимита — использование такого плагина на сайте расцениваю как чистой воды издевательство над посетителями.
Те же *tuts.. ну ваще абзац.. захочешь прочитать что-то за раз, приходится страницу туда-сюда мотать.
Любитель пива 29.07.2010
Саша, сенкс за плагин. Поставил у себя на сайте! :)
Tod 29.07.2010
Александр, странно почему забугром применяют этот плагин, где интернет еще на порядок быстрее:)
Александр-HIMиk 29.07.2010
Я лично не понимаю удобства этого плагина. Иногда хочется сразу в конце поста фотки/картинки поглядеть, а там нишиша! =^___^=
Имхо, не всегда всё, что делают буржуи хорошо приживается у нас.
Tod 30.07.2010
Александр-HIMиk, не не совсем там тишина — как только ты перейдешь в конец поста, то сразу фотки и картинки загрузятся. Фишка в том, что загрузка 1-2 картинок в конце будет быстрее чем ожидание загрузки 10-20 фоток до последних.
Дмитрий 11.08.2010
Tod, там, насколько я понимаю, таким образом крупные сайты экономят на трафике. Если посетитель не крутил страницу вниз, картинки не грузятся.
Tod 13.08.2010
Дмитрий, если брать хостинг в Украине, то ограничения по трафику нигде нет, за бугром не знаю, но по моему только некоторые российские хостеры практикуют такой бред.
Больше всего это направлено для скорость загрузки для пользователей.
Сергей Брусенцов 15.08.2010
Саш, за границей тоже такое практикуют. В Чехии на колокейшене, например, точно. Типа ограничение 100Гб в месяц.
Алексей 17.09.2010
Вы пишете, что эффект загрузки распространяется на все фото, а что мешает изменить $(‘img’) на $(‘img.lasy’) и к фото, которым необходима «Ленивая загрузка» добавить class=»lasy»?
Cron 04.10.2010
А как смотрят на это поисковые системы, не будет ли это мешать индексации изображений?
ведь поисковый робот получит серую картинку заглушку
Tod 04.10.2010
Cron, вопрос чертовски хорош:) Только, честно говоря, без понятия как поведут в этой ситуации себя поисковики. С больше вероятностью мне кажется они все поймут правильно, хотя можно перестраховаться и посмотреть в каком-то сервисе «как видит страницу поисковый робот» — где-то подобное встречалось.
Ден 03.01.2011
Да правда чтоли работает? В WP 3.0.4 не пашет, а ручкая установка скриптов показала, что данные эффекты не работают в FireFox, Seamonkey. Отработали только в IE8 и Opera 10.

Нахрен нужен половинчатый эффект
Анатолий 25.09.2011
Видел получше плагин, он одновременно с картинками подгружает еще и комментарии, а сам пост грузится сразу не в зависимости от прокрутки, только изображения появляются позже.
Ден 26.09.2011
Анатолий, и что же это за плагин такой расчудесный? Как его название?
Sv 20.03.2015
Заметил недостаток у плагинов данного типа. После установки перестает работать функция увеличения изображения, изображение просто открывается в новом окне. Не подскажите как это исправить? сделать так чтобы и «ленивая загрузка» работала и увеличение изображения на странице тоже.
Tod 20.03.2015
Sv, тут скорее всего конфликт между методами работы с картинками jquery и т.п. Попробуйте установить другие модули для увеличения картинки. Я, если честно, с таким не сталкивался.
Вова 02.05.2019
Спасибо. Работает исправно и делает своё дело. Ещё раз благодарю за инструкцию.:)