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

Улучшенный вариант ленивой загрузки 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) на странице, если они есть, то вешаем загрузку плагина на момент когда блоки с этими селекторами появятся на странице.

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