Июл
28
18

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

Плагин jQuery Image Lazy Loader WPНекоторое время назад в wordpress inside я опубликовал просто потрясающую и очень полезную подборку плагинов для изображений, которая собрала много позитивных откликов и упоминаний. Часть из них я уже успел попробовать установить и настроить для своих блогов. Сегодня речь пойдет об одном из таких плагинов, точнее о самом первом среди той двадцатки — 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. Постовой. Хочешь отдохнуть?. В «Ореанде» вы почувствуете, что отдых в Ялте – это заряд энергии на весь год. Только яркие впечатления.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 8, средний балл: 4,38 из 7)
Загрузка...

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

комментариев 18 к статье “Плагин 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 и т.п. Попробуйте установить другие модули для увеличения картинки. Я, если честно, с таким не сталкивался.

Оставить комментарий

(предыдущая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости