Загрузка jq плагинов по необходимости (lazyload)

Алексей,

Небольшой пример, как убрать из загрузки fancybox если на странице он не используется.

Готовый код, нужно только поменять пути к js, css файлам.

if ($(".fancybox, a[data-fancybox]").length > 0) {
	var jq = document.createElement('script'),
		css = document.createElement('link');
	jq.src = "/vendor/fancybox/jquery.fancybox.min.js";
	css.href = "/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 () {
		$(".fancybox").fancybox({
			helpers: {
				overlay: {
					locked: false
				}
			}
		});
	});
}

Что происходит: если на странице есть элементы для которых подключается fancybox, то загружаются js, css плагина и после их загрузки fancybox "активируется". Этакий lazyload, но для js, css :)

Таким образом, нет необходимости грузить плагин на каждой странице, как это делают обычно. Что экономит ресурсы и повышает кол-во баллов в google pagespeed.

Опубликовано 2 Сентября 2019
разработчику, производительность, костыли

Возврат к списку

Комментарии