Сегодня в интернете можно видеть множество open source плагинов для создания сайтов с «ленивой» загрузкой изображений. Среди популярных решений можно отметить Unveil.js, который совсем недавно был опубликован на GitHub. Он призван выступить в роли облеченной версии оригинального jQuery-плагина LazyLoad. После тестирования нескольких свойств, нам скрипт Unveil.js очень понравился.Дизайн интерфейса больше не будет создавать вам сложности, после того, как вы поймете основу. Нужно будет немного попрактиковаться, прежде чем вам станет удобно использовать фрагменты кода и правильно создавать изображения. Тем не менее, данный плагин может похвастаться невероятной поддержкой среди популярных веб-браузеров. Не говоря уже о популярности среди пользователей, у кого до сих пор низкая скорость соединения с интернетом. Плагин для организации ленивой загрузки позволит вам повысить производительность сайта и опыт взаимодействия с пользователями в целом.

Приступаем

Мы создаем обычную HTML5-разметку при помощи некоторых базовых скриптов. Кроме того, мы сохранили копию последней библиотеки jQuery вместе с копией плагина Unveil.js. Вы можете скачать с репозитория GitHub, который включает полноценный js-файл с минимизированным скриптом.

  
  
  Lazy-Loading Images with Unveil.js
  
  
  
  
  
  

Кроме этих основных javascript-файлов, у нас также есть стили веб-страницы, которые расположены внутри файла style.css. Здесь представлены нужные сбросы, шрифты и другое… Общая разметка страницы очень простая, так как мы просто демонстрируем скорость загрузки плагина. Этот скрипт отлично подходит для разработки минималистских веб-сайтов, потому что они практически не влияют на скорость работы.Есть парочка других элементов, которые следует обсудить по поводу тела страницы. Нам нужно понимать, как составлять код HTML5-изображений, чтобы в определенных атрибутах были указаны соответствующие значения. К тому же, нам нужно убедиться, что jQuery-код работает правильным образом. Мы добавили этот блок в самый низ страницы, так как для него требуется всего одна строка кода. Но вы можете расположить этот код где угодно в разметке, и даже поместить в ваш файл более одного JS-кода.

Добавляем HTML-изображения

Плагин Unveil использует HTML5-атрибуты данных для правильной загрузки изображений. В нашем примере изображения ссылаются обратно на исходник в Dribbble. Тем не менее, вы можете просто расположить тег img где угодно в разметке, и получить тот же результат. Существует 3 атрибута, которые используются наиболее часто, и в нашем коде используются 2 из них.

Unveil.js Lazy-Load Demo

  
The Unveil.js plugin is based off Lazyload with similar features and functionality. This is a brief demo to showcase what is possible using the Unveil plugin.
  
  
    
    

    
    
    

Обычный атрибут img src должен указывать на анимацию, отображающую загрузку. Это может быть стандартная заглушка, либо просто пустое gif-изображение. В любом случае, вам вряд ли захочется использовать стандартное изображение. Вместо этого вы можете использовать URL до обычного изображения в атрибуте data-src.Нам так нравится этот плагин, потому что он поддерживает даже устройства с экранами retina. Не только мобильные смартфоны или планшеты, но и современные ноутбуки, в которых установлены экраны высокого разрешения. У вас должны быть изображения с двойным разрешением (@2x), а также включать URL до нового атрибута data-src-retina. Учтите, что мы этот подход не используем, так как мы уже включили размер @2x в качестве стандартного scr. Но функционал просто великолепен, и им невероятно просто пользоваться.

Активируем Unveil.js

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

$(function(){
  $("img").unveil();
});

jQuery-селектор определяет каждый тег img на странице и запускает основную функцию плагина unveil(). Она подгружает исходный src-атрибут в качестве первого изображения, а затем заменяет его, так как пользователь прокручивает страницу вниз. Также существуют некоторые опции, которые вам возможно захочется использовать в функции для обновления настроек. Например, любое цифровое значение, введенное в параметр, будет обновлять расстояние в пикселях на основе того, сколько осталось до загрузки следующих изображений.

$("img").unveil( 200 );

Вот пример, который мы взяли прямо с репозитория GitHub. Вы можете наглядно видеть, что в скрипт по прошествии времени добавляются новые параметры. Тем не менее, нам кажется, что на данный момент Unveil представляет собой очень мощный плагин для веб-разработчиков. Ленивая загрузка изображения не требует полного набора опций для корректной работы. Но вам также следует ознакомиться с нашим живым демо, чтобы понять, каким образом плагин можно использовать на сайте.

В завершение

Мы надеемся, что данное руководство может значить многое для веб-разработчиков. Существует множество техник, которые требуют практики и нечасто можно найти время на то, чтобы разрабатывать скрипты вручную. Тем не менее, функционал ленивой загрузки довольно несложно реализовать, и применение Unveil.js позволит существенно сократить временные затраты.