Июл
28
18

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

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

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

Итак, 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. Постовой. Хочешь отдохнуть?. В «Ореанде» вы почувствуете, что отдых в Ялте – это заряд энергии на весь год. Только яркие впечатления!

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 7, средний балл: 4,14 из 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, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

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

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

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

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