0

Подключил к сайту fancybox, страница стала значительно дольше загружаться как можно поставить загрузку стилей и js fancybox после всех остальных

1 ответ 1

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 });
  }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.