v 0.9.8

Вступление #

Для работы ленивой загрузки можно использовать класс .js-lazy-loading по умолчанию. Для изображений необходимо использовать специальный data-атрибут data-lazy-src, где в значениях указывается путь к изображению.

Установка #

Пример разметки и инициализации ленивой загрузки.

	<img
		class="js-lazy-loading"
		data-lazy-src="../assets/images/demo/1.jpg"
	/>

	<!-- Ленивая загрузка так же работает с обычными DOM-элементами -->
	<div
		class="js-lazy-loading"
		data-lazy-options='{
			"type" "content loaded",
			"callback": "MyLazyCallback"
		}'
	></div>

const options = {
	type: 'content loaded',
	preview: '../assets/images/preview.jpg',
	callback: 'MyLazyCallback',
	parentScrollElement: document.querySelector('.my-parent-scroll-container'),
	classNames: {
		lazy: 'my-lazy-loading-item',
		loaded: 'my-lazy-loading-item--loaded',
	},
}

BasicLazyLoading.init('.my-lazy-loading', options)
BasicLazyLoading.init(document.querySelector('.my-lazy-loading'), options)
BasicLazyLoading.init(document.querySelectorAll('.my-lazy-loading'), options)

// или

BasicLazyLoading.init() // по умолчанию инициaлизирует элементы с классом .js-lazy-loading

Конфигурация #

Настройки, заданные с использованием data-атрибутов.

data-lazy-options #

В значение указываются параметры для гибкой настройки ленивой загрузки.

<img
	class="js-lazy-loading"
	data-lazy-src="../assets/images/demo/1.jpg"
	data-lazy-options='{
		"type": "content loaded",
		"preview": "../assets/images/preview.jpg",
		"callback": "MyLazyCallback",
		"parentScrollElement": document.querySelector(".my-parent-scroll-container"),
		"classNames": {
			"lazy": "my-class-lazy-loading",
			"loaded": "my-class-lazy-loaded"
		}
	}'
/>

Параметры:

Название Тип Описание
type string Тип отложенной загрузки, имеет два значения:
1). content loaded — Когда будет загружена вся страница. Данный тип значения относится к событию DOMContentLoaded;
2). viewport(по умолчанию) — Когда элемент будет в области видимости экрана.
preview string Превью для изображений. Использовуется в качестве временной замены.
callback object Функция обратного вызова, которая вызывается после инициализации ленивой загрузки.
parentScrollElement object Родительский элемент, отвечающий за прокрутку. По умолчанию window.
classNames object Список классов, где есть два значения:
1). lazy — Применяется ко всем элементам, которые загружаются лениво;
2). loaded — Класс, который добавляется после инициализации ленивой загрузки.

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

const myLazyLoading = document.querySelector('.my-lazy-loading')

console.log(myLazyLoading.BasicLazyLoading) // пример экземпляра