Среда, 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 или ленивая загрузка ресурсов — обязательный атрибут современных веб-приложений.

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

Опубликовано в JavaScript, jQuery

Теги

lazy load

Другие материалы в этой категории: « Знакомимся с микро-библиотеками на JavaScript Remodal – jQuery-плагин для показа модальных окон »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх