Матвей Земсков

Заметки веб-мастера

Среда, 20 мая 2015 12:48

Lazyr.js - библиотека для «ленивой» загрузки изображений

Оцените материал
(1 Голосовать)

Как известно, lazy loading — простой подход оптимизации загрузки страницы. Существуют различные варианты этого подхода: например, на стороне сервера таким образом можно организовать подключение компонентов веб-приложения или инициализацию подключения к БД. На стороне клиента — можно подключать только необходимый на данный момент JS-код или подгружать элементы страницы в тот момент, когда посетитель просмотрит ее целиком.

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

Называется этот инструмент — Lazyr.js. Ему не нужны никакие другие JS-библиотеки (jQuery и тп), он легкий (в сжатом виде 1Кб) и быстро работает.

Использование Lazyr.js ускоряет загрузку страницы, откладывая показ изображений, до момента их появления в видимой части окна браузера. Работа библиотеки основана на событии “scroll” браузера.

Взаимодействовать с ней совсем несложно:

  • Сначала подключаем файл layzr.js в разделе <head> страницы

    HTML

    			<script src="/layzr.js"></script>
    		
  • Затем оформляем HTML-код изображений. У каждого элемента, с которым должна работать библиотека должен быть указан один обязательный атрибут — data-layzr. Его значением является путь к изображению.

    HTML

    			<img data-layzr="image/source" />
    		
    Остальные атрибуты опциональны. Хотелось бы заметить то, что Lazyr.js может работать с изображениями с высоким разрешением (для Retina экранов). Чтобы добавить вариант изображения с высоким разрешением, нужно указать путь к нему в атрибуте data-layzr-retina.
    Указание в теге атрибута data-layzr-bg позволяет загружать изображение в качестве фона. Этот атрибут не имеет значения, при его использовании, пути к изображению по прежнему берутся из значения атрибутов data-layzr и data-layzr-retina.
    Если указать в теге атрибут data-layzr-hidden, то изображение не будет загружено.
  • Последний шаг: инициализация работы инструмента. Размещаем на странице код.

    HTML/JS

    			<script>
    				var layzr = new Layzr();
    			</script>
    		
    У Lazyr.js есть возможность передачи различных параметров при инициализации. Они могут передаваться в конструктор в виде объекта (var layzr = new Layzr({...}) ).

Этот полезный инструмент для обеспечения lazy loading изображений поддерживается всеми современными браузерами, в том числе и IE (начиная с 10 версии).

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

В завершении заметки, хотелось бы отметить, что lazy loading или ленивая загрузка ресурсов — обязательный атрибут современных веб-приложений.

Прочитано 1512 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: