Подключил к сайту fancybox, страница стала значительно дольше загружаться как можно поставить загрузку стилей и js fancybox после всех остальных
1 ответ
Для решения задачи динамической подгрузки есть готовые библиотеки, но приведу пример очень простенького последовательного загрузчика на промисах.
Загрузчик принимает аргументом двумерный массив подключаемых к странице css- и js-ресурсов. Предполагается что каждый элемент массива - это подмассив объектов вида {link: 'url'}
или {script: 'url'}
.
Важный момент: ожидается только окончание загрузки ресурсов (по сети), с любым результатом. То есть, этот загрузчик не проверяет "успешно ли загрузился файл", и уж конечно не ждет парсинга стилей / выполнения скриптов.
В <head>
документа разместим код загрузчика (содержимое simple-loader.js далее в ответе):
<script src="js/simple-loader.js"></script>
<script>
jsCssLoader([
[
{ link : 'css/main.css' },
{ script: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js' }
],
[{ script: 'js/main.js' }],
[{ link: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css' }],
[{ script: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js' }]
]);
</script>
В этом примере, сначала загрузятся css-файл страницы c jQuery → затем загрузится js-скрипт страницы → затем css-файл фанкибокса → и наконец, его js.
А вот содержимое simple-loader.js, который и делает всю "магию":
function jsCssLoader(resources2dArr) {
const resources = resources2dArr.slice(0);
document.addEventListener('DOMContentLoaded', function () {
const resEvents = ['load', 'error'];
const promisedEl = resObj => new Promise(resolve => {
const newEl = tag => document.head.appendChild(document.createElement(tag));
const key = Object.keys(resObj)[0],
el = newEl(key);
resEvents.forEach(evt => el.addEventListener(evt, () => resolve(el)));
if (resObj.link) {
el.rel = 'stylesheet';
el.href = resObj[key];
}
else
el.src = resObj[key];
});
const next = res2dArr => {
let arr = res2dArr.shift();
arr && arr.length && Promise.all(arr.map(res => promisedEl(res))).then(els => next(res2dArr));
};
next(resources);
}, { once: true });
}