Плагин 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. Постовой. Хочешь отдохнуть?. В «Ореанде» вы почувствуете, что отдых в Ялте – это заряд энергии на весь год. Только яркие впечатления.
комментариев 19 к статье “Плагин jQuery Image Lazy Loader WP — постепенная загрузка изображений”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Плагин WP-PostRatings рейтинга постов в WordPress (5,79 из 7, голосов - 934)
- Оптимизируем WordPress header и удаляем лишний код (5,19 из 7, голосов - 43)
- Кэширование в wordpress — выбираем лучший плагин для кэширования (5,63 из 7, голосов - 35)
- Плагин WP01 расскажет как ускорить и оптимизировать сайт на WordPress (4,48 из 7, голосов - 31)
- Оптимизация и ускорение Elementor – как убрать лишние стили и шрифты (3,71 из 7, голосов - 34)
- WP-Optimize — плагин для оптимизации базы данных в WordPress (4,58 из 7, голосов - 24)
- Плагины кэширования Hyper Cache + DB Cache Reloaded Fix для wordpress (5,41 из 7, голосов - 17)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Круто! Давно заметил эту фишку с подгрузкой изображений на буржуйских блогах)
Надо и себе попробовать) Спасибо!
Оу, спасибо, как раз искал как это сделать, но нашел лишь способ с кучей кода, правда там была подгрузка всей страницы постепенно при скроллинге.
В наше время высокоскоростного безлимита — использование такого плагина на сайте расцениваю как чистой воды издевательство над посетителями.
Те же *tuts.. ну ваще абзац.. захочешь прочитать что-то за раз, приходится страницу туда-сюда мотать.
Саша, сенкс за плагин. Поставил у себя на сайте! :)
Александр, странно почему забугром применяют этот плагин, где интернет еще на порядок быстрее:)
Я лично не понимаю удобства этого плагина. Иногда хочется сразу в конце поста фотки/картинки поглядеть, а там нишиша! =^___^=
Имхо, не всегда всё, что делают буржуи хорошо приживается у нас.
Александр-HIMиk, не не совсем там тишина — как только ты перейдешь в конец поста, то сразу фотки и картинки загрузятся. Фишка в том, что загрузка 1-2 картинок в конце будет быстрее чем ожидание загрузки 10-20 фоток до последних.
Tod, там, насколько я понимаю, таким образом крупные сайты экономят на трафике. Если посетитель не крутил страницу вниз, картинки не грузятся.
Дмитрий, если брать хостинг в Украине, то ограничения по трафику нигде нет, за бугром не знаю, но по моему только некоторые российские хостеры практикуют такой бред.
Больше всего это направлено для скорость загрузки для пользователей.
Саш, за границей тоже такое практикуют. В Чехии на колокейшене, например, точно. Типа ограничение 100Гб в месяц.
Вы пишете, что эффект загрузки распространяется на все фото, а что мешает изменить $(‘img’) на $(‘img.lasy’) и к фото, которым необходима «Ленивая загрузка» добавить class=»lasy»?
А как смотрят на это поисковые системы, не будет ли это мешать индексации изображений?
ведь поисковый робот получит серую картинку заглушку
Cron, вопрос чертовски хорош:) Только, честно говоря, без понятия как поведут в этой ситуации себя поисковики. С больше вероятностью мне кажется они все поймут правильно, хотя можно перестраховаться и посмотреть в каком-то сервисе «как видит страницу поисковый робот» — где-то подобное встречалось.
Да правда чтоли работает? В WP 3.0.4 не пашет, а ручкая установка скриптов показала, что данные эффекты не работают в FireFox, Seamonkey. Отработали только в IE8 и Opera 10.
Нахрен нужен половинчатый эффект
Видел получше плагин, он одновременно с картинками подгружает еще и комментарии, а сам пост грузится сразу не в зависимости от прокрутки, только изображения появляются позже.
Анатолий, и что же это за плагин такой расчудесный? Как его название?
Заметил недостаток у плагинов данного типа. После установки перестает работать функция увеличения изображения, изображение просто открывается в новом окне. Не подскажите как это исправить? сделать так чтобы и «ленивая загрузка» работала и увеличение изображения на странице тоже.
Sv, тут скорее всего конфликт между методами работы с картинками jquery и т.п. Попробуйте установить другие модули для увеличения картинки. Я, если честно, с таким не сталкивался.
Спасибо. Работает исправно и делает своё дело. Ещё раз благодарю за инструкцию.:)