Ленивая загрузка (Lazy loading): что это такое и как ее сделать на сайте

Александр Овсянников (Интернет Мажор)
Обновлено: 08.11.2018
Рубрика: Верстка
Ленивая загрузка

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

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

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

Зачем применять ленивую загрузку на сайте?

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

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

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

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

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

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

Отложенная загрузка бывает 3 видов:

  1. Скроллинг. Контент, не попадающий в видимую зону, загружается только после того, как посетитель ознакомится с изначальным материалом, уже загруженным, и прокрутит страницу вниз. Данный вариант асинхронной загрузки вы можете встретить в социальных сетях, где лента новостей никогда не заканчивается, а также в некоторых онлайн-ресурсах СМИ, интернет-магазинах и каталогах товаров и услуг. Применяя «бесконечный» скроллинг, важно обеспечить грамотную навигацию к главному меню, установив фиксированную панель или кнопку «наверх».
  2. Клик. Контент будет загружаться после нажатия пользователем на специальную ссылку по типу «подробнее». Еще примеры загрузки «по клику»: появление модальных окон и открытие полномасштабного изображения после нажатия на миниатюру. Данный метод отображения информации самый распространенный, однако он редко интересует пользователей. Если материал все же заинтересует посетителя или он очень важен для поисковиков, а скрыть его нужно только чтобы сэкономить пространство, то лучше внедрить функцию через стандартный JS, а не AJAX. Так контент будет загружаться, а отображаться лишь после нажатия.
  3. Фоновый режим. Допустим, посетитель уже загрузил документ и оставил его открытым. В таком случае в фоновом режиме можно загрузить, например, фото большого масштаба, которое ему будет необходимо для последующей работы с ресурсом. Данный способ существенно ускоряет функциональность сайта, но только в том случае, если вы загрузите реально нужные аудитории материалы. Чтобы не прогадать, изучите статистику посещений. Не забудьте также учесть, какая у пользователя скорость интернета, иначе вы только навредите ему.

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

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

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

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

№1. Стандартный lazy loading и отображение от David Walsh

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

<img data-src="image.jpg" alt="test image">

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

img {
  opacity: 1;
  transition: opacity 0.3s;
}
 
img[data-src] {
  opacity: 0;
}

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

[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

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

№2. Robin Osborne – ленивая загрузка с прогрессивным улучшением

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

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

  1. Техника актуальна как в случае отключенного, так и сломанного JS. Это важно, ведь скрипты часто подвергаются ошибкам.
  2. Она предоставляет юзерам простой доступ к материалам ресурса.
  3. Для реализации метода нет необходимости в использовании плагинов и фреймворков.
  4. Ленивая загрузка функционирует посредством скроллинга – фото не загрузятся, пока посетитель не докрутит страницу до соответствующего места.

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

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

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

  1. Ленивую загрузку фоновых и добавляемых изображений.
  2. Поддержку устаревших браузеров, в том числе IE 7 и 8 версии.
  3. Загрузку картинок в прокручиваемом контейнере.
  4. Использование CDN для размещения плагина вне сервера.
  5. Загрузку всех элементов, содержащих атрибут src: скриптов, iframe и прочего.
  6. Асинхронную загрузку фотографий с учетом разрешения и размера экрана.

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

<img class="b-lazy" src="placeholder.gif" data-src="image.jpg" alt="test image">

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

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

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

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

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

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

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

<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>

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

<script src="jqlight.lazyloadxt.js"></script>
<script src="jquery.lazyloadxt.js"></script>

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

<img data-src="lazy.jpg" width="100" height="100" alt="test image">

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

$(elements).lazyLoadXT();

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

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

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

  1. Работает с большим количеством браузеров.
  2. Поддерживает CDN, поэтому скрипты можно не загружать на сервер.
  3. Дает возможность асинхронно загружать медиа многих типов.
  4. Аддоны позволяют создавать красивые переходы, лениво загружать фоновые картинки и прочее.
  5. Изобилие вариантов использования lazy loading – на странице, в макетах со скроллингом по горизонтали или вертикали, в контейнере и т.д.
  6. Если не желаете задействовать весь плагин, можно подключить облегченный скрипт.
  7. В материалах сообщается, как действовать в случае отключения в браузере JavaScript.

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

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

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

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

  1. Высокой производительности: чуть больше 1 байта JS-кода и 463 байта CSS.
  2. Независимости от фреймворков и библиотек.
  3. Поддержке ретина экранов.
  4. Применении прогрессивного улучшения для сломанного JavaScript и устаревших браузеров.

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

Ленивая загрузка для контента

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

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

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

<div class="mainWrapper">
        <h1>Портфолио</h1>
            <div id="smartPortfolio">
                <div class="ourWork">
                    <img src="./img/ico1.png" alt="первый набор иконок">
                </div>
                <div class="ourWork">
                    <img src="./img/ico2.png" alt="второй набор иконок">
                </div>
            </div>
            <div id="moreButton" onclick="lazyload.load()">
                <span>Показать еще...</span>
            </div>
            <div id="loadingDiv">
                <span>Загрузка данных</span>
            </div>
</div>

Все довольно просто и понятно. Но нужно уделить внимание div с id=»smartPortfolio», id=»moreButton» и id=»loadingDiv», потому что они находятся в важнейшем скрипте, отвечающем за загрузку контента со сторонних документов. «Контейнером» портфолио выступает 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";

Затем, как и упоминалось раньше, перед тегом body (закрывающимся), указываем скрипт:

<script type="text/javascript" src="./js/lazyload.js"></script>

Заключение

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

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

Рейтинг статьи: / 5. Кол-во оценок:

Александр Овсянников ака Интернет Мажор
Занимаюсь продвижением и заработком на сайтах с 2009 года.

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

avatar
1 Цепочка комментария
1 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
Интернет МажорДонни Авторы недавних комментариев
  Подписаться  
Уведомление о
Донни
Донни

«К примеру, многие из тех, кто прочтут статью, затем протестируют скрипт через индексный файл в браузере, а не загрузив его на сервер. Так будет показываться оповещение об ошибке.» Что это значит?