«Ленивая загрузка. Ленивая загрузка изображений с использованием IntersectionObserver Использование контейнера для каждого изображения

Привет, в этой статье Я рассказываю как сделать ленивую загрузку изображений на любом сайте и на любом движке, а так же показываю пример на базе WordPress, аналогичный DLE, Drupal, Prestashop и другим популярным CMS.

Немного теории

Ты что ещё не в курсе? Ленивая или отложенная загрузка (от английского lazy load) это технология позволяющая загружать только те изображения на странице, которые в данный момент нужны пользователю. Результат внедрения — ускорение загрузки страницы, довольный посетитель и увеличение конверсии.

Все заметили как вконтакте быстро грузится!?

Пример из жизни

Представь что у тебя на странице около 200 изображений (это может быть страница категорий в интернет магазине или раздел фотогалереи или даже запись в блоге). Пусть каждое изображение размером 250 на 250 пикселей и весит 50 Кб. Итого получаем почти 10 мб изображений (200 шт * 50 кб = 10’000 кб) и 200 запросов к серверу.

Зачем нагружать пользователя таким количеством информации сразу? Давай покажем ему только первые 8 изображений, а остальные по мере того как они ему понадобятся. Загрузка страницы в этом случае пройдёт в разы быстрее. Кроме того, большинство твоих пользователей вообще не будут скролить страницу до конца. Им будет достаточно этих 8 уже загружённых изображений!

Отличный пример реализации ленивой загрузки:

Wildberries это сайт с ежедневной милионной посещаемостью Представляешь себе нагрузку на сервер?

Внедрение (установка) ленивой загрузки

Установить ленивую загрузку на своём сайте может каждый и ты тоже, достаточно поэтапно выполнить следующие шаги:

2. Загрузи файлы из архива на свой сервер, например в корень твоего сайта, чтобы файлы были доступны ссылке вроде tvoisite.ru/js/jquery.js

3. Подключи эти файлы в шаблон (для WordPress это файл header.php, а для DLE это main.tpl), а сразу после них вставь код. У тебя должно получиться нечто похожее на это:

$(function() { $("img").lazyload({ failurelimit: 10, threshold: 150, placeholder: "/img/dot.gif", effect: "fadeIn" }); });

Эти строчки нужно включить до элемента

4. Чтобы картинка сразу не загружалась, надо для всех изображений которые мы хотим лениво загружать, заменить
на

5. Готово! Но ты должен настроить этот скрип под себя, вот параметры которые ты можешь настроить:

• failurelimit: 10 — скрипт останавливает поиск после того, как обнаружит 10 изображений на странице. Если у твоей страницы достаточно сложная разметка, то укажи здесь число побольше.
• threshold: 150 — порог открытия изображения. Если установить значение 0, то изображение начнёт загружаться только в тот момент когда появится на странице. В нашем случае изображение начнёт загружать заранее, т.е. за 150 пикселей до появления в зоне видимости.
• placeholder: «/img/dot.gif» — путь к фоновой картинке, которая будет отображаться пока не загрузится само изображение. Здесь можно установить какую-нибудь анимацию загрузки.
• effect: «fadeIn» — эффект появления графического элемента.

Подвожу итог

Я использую технологию отложенной загрузки в двух своих интернет магазинах. Это позволяет мне экономить ресурсы сервера, а так же не заставлять пользователя томится в ожидании полной загрузки страницы. В своё время с помощью этой технологии Я уменьшил скорость загрузки своего интернет магазина с 6 до 2 секунд. Только вдумайтесь: в три раза быстрее!

А ты используешь ленивую загрузку?

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

Применяя ленивую загрузку, картинки и прочие материалы на сайте подгружаются асинхронно, а конкретнее, после того, как полностью загрузится видимый фрагмент веб-страницы или исключительно при отображении видимой части окна браузера. Например, если посетитель не до конца проскроллит страницу, то изображения расположенные внизу, не будут загружаться.

Lazy loading актуален на многих ресурсах, особенно на тех, где есть изобилие картинок. Посетите любой онлайн-сервис с фотографиями в высоком разрешении и обратите внимание, как площадка подгружает фото только видное на вашем экране, а при скролле вниз новые фото начинают загружаться, как только появляются у вас на экране. По мере скроллинга происходит замена плейсхолдеров на изображения высокого разрешения.

Бывают нередкие случаи, когда определенный фрагмент страницы виден не всем, однако на его обработку или передачу материала затрачивается огромное количество ресурсов. Вот тогда и приходит время задуматься об отложенной загрузке, которая исключит генерацию и загрузку скрытых элементов до тех пор, пока их не понадобится просмотреть или использовать.

На заметку. Ленивая загрузка задействуется технологией , и она порождается событиями, отслеживаемыми посредством . Поэтому перед использованием асинхронной загрузки важно учесть, что пользователям, у которых нет JS, функция будет недоступна, а роботы поисковиков не увидят скрытый скриптом контент.

А теперь поговорим о двух весомых причинах, по которым стоит сделать выбор в пользу отложенной загрузки:

Если ваш веб-ресурс показывает статьи или предоставляет для посетителей различные функции при помощи JavaScript, то обязательно требуется загружать . Как правило, скрипты перед выполнением нуждаются в загрузке объектной модели документа. Поэтому на сайте, содержащем изобилие фотографий и прочих изображений, lazy loading играет ключевую роль в том, останется посетитель на нем, или же сразу отправится на поиски конкурентов.

Принцип асинхронной загрузки заключается в загрузке контента только в том случае, если посетитель проскроллил веб-страницу до того фрагмента, где он попадает в видимую часть браузерного окна. Проще говоря, фотографии не будут загружены, если пользователь не прокрутит страницу до этого места. И это положительно влияет на экономию трафика, в связи с чем многие пользователи, сидящие с гаджетов и те, у кого слабый интернет, оценят данную особенность ресурса по достоинству. В следующий раз они наверняка захотят посетить его снова.

Исходя из вышесказанного можно сделать вывод, что ленивая загрузка значительно повышает производительность сайта.

Разновидности ленивой загрузки

Скроллинг. Контент, не попадающий в видимую зону, загружается только после того, как посетитель ознакомится с изначальным материалом, уже загруженным, и прокрутит страницу вниз. Данный вариант асинхронной загрузки вы можете встретить в социальных сетях, где лента новостей никогда не заканчивается, а также в некоторых онлайн-ресурсах СМИ, интернет-магазинах и каталогах товаров и услуг. Применяя «бесконечный» скроллинг, важно обеспечить грамотную навигацию к главному меню, установив фиксированную панель или кнопку «наверх».

Клик. Контент будет загружаться после нажатия пользователем на специальную ссылку по типу «подробнее». Еще примеры загрузки «по клику»: появление модальных окон и открытие полномасштабного изображения после нажатия на миниатюру. Данный метод отображения информации самый распространенный, однако он редко интересует пользователей. Если материал все же заинтересует посетителя или он очень важен для поисковиков, а скрыть его нужно только чтобы сэкономить пространство, то лучше внедрить функцию через стандартный JS, а не AJAX. Так контент будет загружаться, а отображаться лишь после нажатия.

Фоновый режим. Допустим, посетитель уже загрузил документ и оставил его открытым. В таком случае в фоновом режиме можно загрузить, например, фото большого масштаба, которое ему будет необходимо для последующей работы с ресурсом. Данный способ существенно ускоряет функциональность сайта, но только в том случае, если вы загрузите реально нужные аудитории материалы. Чтобы не прогадать, изучите статистику посещений. Не забудьте также учесть, какая у пользователя скорость интернета, иначе вы только навредите ему.

Как сделать ленивую загрузку?

Чтобы улучшить производительность сайта, нужно создать скрипт ленивой загрузки изображений и контента. Существует много вариантов, как это сделать.

5 вариантов ленивой загрузки для изображений

Поговорим о самых распространенных и готовых решений ленивой загрузки для изображений.

В упрощенной версии данный скрипт ленивой загрузки представляет собой замену атрибута src на data-src в теге img :

Элементы img , содержащие атрибуты data-src , скрыты в . После того, как картинки будут загружены, они плавно отображаются с применением переходов:

Img { opacity: 1; transition: opacity 0.3s; } img { opacity: 0; }

Затем JavaScript передает всем тегам img атрибут src , которые в итоге получают значение атрибута data-src . После загрузки всех изображений, data-src убирается из img :

ForEach.call(document.querySelectorAll("img"), function(img) { img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() { img.removeAttribute("data-src"); }; });

Еще David Walsh предусмотрел фолбек в случае несрабатывания JavaScript, отличающийся эффективностью и простой реализацией. Однако его функции не предусматривают загрузку при скроллинге веб-страницы. Это значит, что браузер подгружает все изображения вне зависимости от того, «дошел» посетитель до них, либо нет. Да, фолбек позволяет показывать страницу быстрее, потому что картинки загружаются после HTML, однако экономии трафика не будет.

Техника подразумевает ленивую загрузку, в которой JS применяется в качестве улучшения для стандартных CSS и HTML. Прогрессивное улучшение обеспечивает показ изображений для пользователей даже в том случае, если JavaScript, который и отвечает за их отображение, будет отключен или появится ошибка, блокирующая работу скрипта.

Прогрессивное улучшение обладает несколькими преимуществами:

Техника актуальна как в случае отключенного, так и сломанного JS. Это важно, ведь скрипты часто подвергаются ошибкам.

Она предоставляет юзерам простой доступ к материалам ресурса.

Для реализации метода нет необходимости в использовании плагинов и фреймворков.

Ленивая загрузка функционирует посредством скроллинга – фото не загрузятся, пока посетитель не докрутит страницу до соответствующего места.

Детальную информацию о решении Osborne можете узнать .

№3. Плагин bLazy.js на простом JS

Данный скрипт мало весит, осуществляет асинхронную загрузку и работу с несколькими изображениями с целью экономии трафика и запросов на сервер. Его применение обеспечивает:

Ленивую загрузку фоновых и добавляемых изображений.

Поддержку устаревших браузеров, в том числе IE 7 и 8 версии.

Загрузку картинок в прокручиваемом контейнере.

Использование CDN для размещения плагина вне сервера.

Загрузку всех элементов, содержащих атрибут src: скриптов, iframe и прочего.

Асинхронную загрузку фотографий с учетом разрешения и размера экрана.

Стандартная реализация. Разметка:

Тег img требуется поменять:

Добавить класс.b-lazy.

В виде значения src применить плейсхолдер. Сэкономить число запросов на сервер помогут прозрачные инлайновые gif с кодом base . Но учтите, что на других страницах, где будут применяться те же изображения, не будет кэширования.

Data-src показывает на картинку, которую требуется асинхронно загрузить.

JavaScript: укажите стандартный вызов bLazy и осуществите настройку объекта по карте опций:

Var bLazy = new Blazy({ //опции });

№4. Плагин Lazy Load XT jQuery

Отличный плагин для удобного написания своего скрипта ленивой загрузки. Отметим, что есть полная версия jQuery плагина, где посредством асинхронной загрузки можно загружать видео, iframe и прочие теги, содержащие атрибут src , а есть упрощенная, посвященная исключительно простой отложенной загрузке.

Для использования плагина на сайте, нужно перед закрывающим тегом добавить jQuery-библиотеку, указав jquery.lazyloadxt.js (упрощенная версия) или jquery.lazyloadxt.extra.js (расширенная):

Есть также альтернативный вариант, позволяющий не использовать весь плагин – облегченный скрипт jqlight.lazyloadxt.min.js :

В изображениях замените src на атрибут data-src :

Плагин может активироваться автоматически, либо вы можете сделать это самостоятельно. Для этого просто введите:

$(elements).lazyLoadXT();

Lazy Load XT jQuetry добавляет большое количество аддонов. К примеру:

Добавив jquery.lazyloadxt.spinner.css , в процессе загрузки картинки есть возможность показывать анимированный спиннер.

Подключив для сайта animate.min.css и указав в JS-файле $.lazyLoadXT.onload.addClass = ‘animated bounceOutLeft’; можно добавить из Animate.css различные эффекты для загрузки картинок.

Плюсы техники:

Работает с большим количеством браузеров.

Поддерживает CDN, поэтому скрипты можно не загружать на сервер.

Дает возможность асинхронно загружать медиа многих типов.

Аддоны позволяют создавать красивые переходы, лениво загружать фоновые картинки и прочее.

Изобилие вариантов использования lazy loading – на странице, в макетах со скроллингом по горизонтали или вертикали, в контейнере и т.д.

Если не желаете задействовать весь плагин, можно подключить облегченный скрипт.

В материалах сообщается, как действовать в случае отключения в браузере JavaScript.

Просмотреть все аддоны и варианты можете по этой ссылке .

№5. Размытое изображение от Craig Buckler

Вы наверняка замечали на некоторых сайтах, как основное изображение статьи сначала размытое, а потом загружается четкая картинка высокого качества. Есть несколько вариантов загрузки фотографий методом размытого эффекта. Один из лучших – Craig Buckler.

Преимущества техники заключаются в:

Высокой производительности: чуть больше 1 байта JS-кода и 463 байта CSS.

Независимости от фреймворков и библиотек.

Поддержке ретина экранов.

Применении прогрессивного улучшения для сломанного JavaScript и устаревших браузеров.

Скачать код вы можете с хранилища сайта GitHub .

Для начала нужно подключить библиотеку jQuery:

Суть метода заключается в том, чтобы с использованием AJAX загружать необходимый элемент div с левого файла на целевую страницу.

Портфолио Показать еще...

Все довольно просто и понятно. Но нужно уделить внимание div с id=»smartPortfolio» , , потому что они находятся в важнейшем скрипте, отвечающем за загрузку контента со сторонних документов. «Контейнером» портфолио выступает SmartPortfolio. MoreButton – кнопка, нажимая на которую происходит загрузка еще одного фрагмента портфолио. LoadingDiv – часть страницы, где будет отображаться текст в случае полного открытия портфолио или возникновения какой-либо ошибки.

К примеру, многие из тех, кто прочтут эту статью, затем протестируют скрипт через индексный файл в браузере, а не загрузив его на сервер. Будут получать оповещение об ошибке. А если еще и слабое интернет-соединение, то файлы будут загружаться дольше. Поэтому актуально написать сообщение или вставить картинку, дающие пользователю понять, что идет загрузка.

Вот и сам скрипт, для подключения которого нужно вставить код перед закрывающимся тегом body :

Var lazyload = lazyload || {}; (function($, lazyload) { "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() { var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax({ url: url, success: function(response) { if (!response || response.trim() == "NONE") { $(buttonId).fadeOut(); $(loadingId).text("Портфолио полностью загружено"); return; } appendContests(response); }, error: function(response) { $(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу."); } }); }; var appendContests = function(response) { var id = $(buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); page += 1; }; })(jQuery, lazyload);

В структуре веб-ресурса страницы, откуда будут браться данные для загрузки при нажатии, находятся в папке pages . В ней 3 файла, последний из них пустой. Так предусмотрено логикой скрипта. Путь в нем имеет следующий вид:

Var url = "./pages/" + page + ".html";

Но при использовании иного пути важно заменить его в самом скрипте. То же самое нужно сделать, если вы применили другие ID:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

Сегодня я покажу как сделать ленивую загрузку изображений с помощью плагина B-lazy .

Ленивая загрузка изображений — когда изображения загружаются постепенно, по мере прокрутки сайта. Это позволяет ускорить сайт, так как при первой загрузке сайта он не будет грузить большое количество изображений, которые в первом экране и не нужны:

Приступим

Первым делом скачаем плагин. Для этого перейдем на сайт http://dinbror.dk/blazy/, в правом верхнем углу нажмем« Download». Из открывшейся вкладки скопируем код плагина и вставим его в наш js файл. Если нет желания идти на сайт плагина, скопируйте код из поля ниже.

// Код библиотеки /*! hey, Lazy.js - v1.8.2 - 2016.10.25 A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy */ (function(q,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():q.Blazy=m()})(this,function(){function q(b){var c=b._util;c.elements=E(b.options);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&l(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.saveViewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=c.left&&b.bottom>=c.top&&b.left