Улучшенный вариант ленивой загрузки js плагинов

587
Алексей,
Улучшенный вариант ленивой загрузки js плагинов

Исключает повторную загрузку, загружает плагин только при отображении нужного элемента на экране, срабатывает после аякс запросов.

Исключает повторную загрузку, загружает плагин только при отображении нужного элемента на экране, срабатывает после аякс запросов.

function loadAssets() {
	// fancybox
	let selector = ".fancybox, a[data-fancybox]";
	if ($(selector).length > 0) {
		var iObserver = new IntersectionObserver(function(entries) {
			if (entries[0].isIntersecting === true && $('#fancybox-script').length <= 0) {
				// Загружаем fancybox
				let jq = document.createElement('script'),
					css = document.createElement('link');
				jq.src = "/local/templates/s1_blog/vendor/fancybox/jquery.fancybox.min.js";
				jq.id = "fancybox-script";
				css.href = "/local/templates/s1_blog/vendor/fancybox/jquery.fancybox.min.css";
				css.type = "text/css";
				css.rel = "stylesheet";
				document.getElementsByTagName('head')[0].appendChild(jq);
				document.getElementsByTagName('head')[0].appendChild(css);
				$(jq).on('load', function () {
					// console.log('fancybox load');
				});
				iObserver.unobserve(entries[0].target); // перестаём отслеживать видимость
			}
		}, {threshold: [0]}); // от 0 до 1, % видимой части элемента на экране

		$(selector).each(function () {
			iObserver.observe(this);
		});

	}
}
(function($) {
	$(document).ajaxComplete(function(event, xhr, settings) {
		loadAssets();
	});
	$(document).ready(function() {
		loadAssets();
	});
})(jQuery);

В примере выше проверяем наличие селекторов (для которых подключается fancy) на странице, если они есть, то вешаем загрузку плагина на момент когда блоки с этими селекторами появятся на странице.

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.

Опубликовано 9 ноября 2022 | Обновлено 16 декабря 2022
js, производительность
Поделиться
Похожие статьи
Ленивая загрузка виджетов Retail Rocket
Их виджеты с рекомендованными товарами блокируют страницу на 7 секунд. Google PageSpeed это очень не...
Читать дальше » 0
Алексей,
Загрузка js по событию начала активности пользователя
Я всё мучаю загрузку яндекс карт. Уж слишком они тяжелые, сразу грузить нельзя, а при открытии они з...
Читать дальше » 0
Алексей,
Комментарии
❮…❯
Авторизуйтесь чтобы получать уведомления об ответе
Исключает повторную загрузку, загружает плагин только при отображении нужного элемента на экране, срабатывает после аякс запросов.