Главная > Блог > Web-разработка > JavaScript и TypeScript >

Lazy Load — отложенная загрузка изображений

01.10.2013

Теги: CSS • HTML • JavaScript • jQuery • Web-разработка

Lazy Load — это jQuery плагин, который позволяет осуществить отложенную загрузку изображений, что актуально для страниц с большим количеством изображений. Изображения загружаются по мере пролистывания страницы пользователем. Использование Lazy Load позволяет увеличить скорость загрузки страницы и уменьшить нагрузку на сервер.

Как использовать?

Поскольку Lazy Load — плагин jQuery, сперва подключаем библиотеку jQuery, а потом сам плагин:

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

Далее необходимо изменить HTML код. В качестве значения атрибута src изображения указываем заглушку — gif серого цвета размером 1px на 1px. В качестве значения атрибута data-original указываем URL настоящего изображения.

Также необходимо указать размеры изображения width и height как атрибуты тега <img>, или в стилях CSS. Иначе плагин может работать некорректно.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

И после этого:

$("img.lazy").lazyload();

Теперь все изображения с классом lazy будут загружаться по мере пролистывания страницы.

Для бразеров без поддержки JavaScript

В случае если у пользователя не поддерживается или отключен JavaScript, имеется возможность отобразить изображение поместив его в тег <noscript>.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">
<noscript><img src="img/example.jpg" width="640" height="480"></noscript>

Для предотвращения одновременного отображения заглушки и изображения рекомендуется спрятать заглушку с помощью CSS.

.lazy {
    display: none;
}

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

$("img.lazy").show().lazyload();

Всё это опционально и нужно лишь в случае если вы хотите поддерживать браузеры без JavaScript.

Порог срабатывания

По умолчанию изображения загружаются в момент появления на экране. Если вы хотите чтобы они загружались раньше — установите параметр threshold. Для того, чтоб изображения загружались за 200 пикселей до того, как они отобразятся на экране, установите значение threshold равным 200.

$("img.lazy").lazyload({
    threshold: 200
});

События

Вы можете обработать любое jQuery-событие, например click или mouseover. По-умолчанию изображения загружаются во время отображения на экране. Ниже приведен пример позволяющий загружать изображение после клика по заглушке:

$("img.lazy").lazyload({ 
    event: "click"
});

Использование эффектов

По-умолчанию плагин ждет полной загрузки изображения и тогда вызывает show() для его отображения. При этом можно использовать любой эффект. Пример использования fadeIn-эффекта:

$("img.lazy").lazyload({ 
    effect: "fadeIn"
});

Изображения внутри контейнера

Так же вы можете использовать изображения внутри контейнера, например div с прокруткой. Смотрите пример с горизонтальной и вертикальной прокруткой.

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({         
    container: $("#container")
});

Когда изображения не последовательны

После прокрутки страницы Lazy Load беспрерывно ищет незагруженные изображения. В этом цикле он проверяет, появилось ли изображение в видимой части окна браузера. По умолчанию цикл останавливается после того, как во время прокрутки в видимой части экрана появится первое изображение (которое ранее было за пределами видимости). Это базируется на предположении, что порядок изображений на странице такой же, как и в HTML коде. В некоторых случаях это может быть не так. Вы можете контролировать поведение загрузки, задав параметр failure_limit.

$("img.lazy").lazyload({ 
    failure_limit: 10
});

Установка значения failure_limit в 10 означает, что плагин должен остановить поиск изображений для загрузки после того, как будет найдено 10 изображений в невидимой части окна.

Загрузка изображений через заданный промежуток времени

Нижеприведенный код ожидает полной загрузки страницы (не только HTML, но и всех видимых изображений). Через 5 секунд после загрузки страницы, будут загружены изображения находящиеся в невидимой части окна браузера.

$(function() {          
    $("img:below-the-fold").lazyload({
        event: "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
});

Загрузка скрытых изображений

Бывают случаи, когда у вас на странице есть скрытые изображения. Например во время динамического изменения видимости некоторых объектов. Для ускорения работы Lazy Load игнорирует скрытые изображения. Если вы хотите загружать скрытые изображения, установите значение skip_invisible в false.

$("img.lazy").lazyload({ 
    skip_invisible: false
});

Поиск: CSS • HTML • JavaScript • Web-разработка • jQuery