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

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

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

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

if ($(".fancybox, a[data-fancybox]").length > 0) {
	let js = document.createElement('script'),
		css = document.createElement('link');
	js.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(js);
	document.getElementsByTagName('head')[0].appendChild(css);
	js.onload = function () {
		$(".fancybox").fancybox({
			helpers: {
				overlay: {
					locked: false
				}
			}
		});
	};
}

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

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

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