В этой заметке хотелось бы обратить внимание читателя на одну небольшую JS-библиотеку, используемую для «ленивой» загрузки изображений на страницу сайта.
Называется этот инструмент — Lazyr.js. Ему не нужны никакие другие JS-библиотеки (jQuery и тп), он легкий (в сжатом виде 1Кб) и быстро работает.
Использование Lazyr.js ускоряет загрузку страницы, откладывая показ изображений, до момента их появления в видимой части окна браузера. Работа библиотеки основана на событии “scroll” браузера.
Взаимодействовать с ней совсем несложно:
- Сначала подключаем файл layzr.js в разделе <head> страницы
HTML
- Затем оформляем HTML-код изображений. У каждого элемента, с которым должна работать библиотека должен быть указан один обязательный атрибут — data-layzr. Его значением является путь к изображению.
HTML
Остальные атрибуты опциональны. Хотелось бы заметить то, что Lazyr.js может работать с изображениями с высоким разрешением (для Retina экранов). Чтобы добавить вариант изображения с высоким разрешением, нужно указать путь к нему в атрибуте data-layzr-retina.
Указание в теге атрибута data-layzr-bg позволяет загружать изображение в качестве фона. Этот атрибут не имеет значения, при его использовании, пути к изображению по прежнему берутся из значения атрибутов data-layzr и data-layzr-retina.
Если указать в теге атрибут data-layzr-hidden, то изображение не будет загружено. - Последний шаг: инициализация работы инструмента. Размещаем на странице код.
HTML/JS
У Lazyr.js есть возможность передачи различных параметров при инициализации. Они могут передаваться в конструктор в виде объекта (var layzr = new Layzr({...}) ).
Этот полезный инструмент для обеспечения lazy loading изображений поддерживается всеми современными браузерами, в том числе и IE (начиная с 10 версии).
Подробно ознакомиться с возможностями библиотеки и загрузить ее вы можете на странице проекта на Github
В завершении заметки, хотелось бы отметить, что lazy loading или ленивая загрузка ресурсов — обязательный атрибут современных веб-приложений.