Перейти к содержанию

Lazy Load на ванильном JavaScript

ArtemPitov

501 просмотр

JS

class APLazy 
{
	constructor (lazyClass) 
	{
		if (typeof lazyClass === 'undefined') {
			this.lazyClass  = 'APLazy';
		} else {
			this.lazyClass  = lazyClass;
		}

		this.lazyArray = [];	
	}

	setLazy() 
	{
		this.lazyArray = document.getElementsByClassName(this.lazyClass);
	}

	cleanLazy() 
	{
		this.lazyArray = Array.prototype.filter.call(this.lazyArray, (l) => l.getAttribute('data-src'));
	}

	lazyLoad() 
	{
		for (let element of this.lazyArray) {
			if (this.isInViewport(element)) {
				if (element.getAttribute('data-src')) {
					element.src = element.getAttribute('data-src');
					element.removeAttribute('data-src');
				}
			}
		}

		this.cleanLazy();
	}

	isInViewport(element) 
	{
		var rect = element.getBoundingClientRect();

		return (
			rect.bottom >= 0 && rect.right >= 0 &&
			rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
			rect.left <= (window.innerWidth || document.documentElement.clientWidth)
		);
	}

	registerListener(event, func) 
	{
		if (window.addEventListener) {
			window.addEventListener(event, func);
		} else {
			window.attachEvent('on' + event, func);
		}
	}
}

 

Используем JS

if (typeof window.APLazy == 'undefined') {
	window.APLazy = new APLlazy('my-lazy-class');

	window.APLazy.setLazy();
	window.APLazy.lazyLoad();
			
	window.APLazy.registerListener('scroll', function () { window.APLazy.lazyLoad(); });
	window.APLazy.registerListener('resize', function () { window.APLazy.lazyLoad(); });
} else if (typeof window.APLazy == 'object' ) {
	window.APLazy.setLazy();
	window.APLazy.lazyLoad();
}

 

Используем HTML 

<img src="loader.gif" data-src="image.jpg" class="APLazy" />

 



0 Комментариев


Рекомендуемые комментарии

Комментариев нет

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.