Файл сценария предварительной загрузки

Question

Существует множество плагинов для предварительной загрузки изображений, но есть ли способ предварительной загрузки javascript? Мое приложение использует большой js-файл, и загрузка занимает около 5 секунд, прежде чем отобразится страница ... Итак, есть ли способ отобразить «сообщение о загрузке», пока я каким-то образом предварительно загружаю скрипт? (Что-то вроде «Загрузка ...», как в Gmail)

Спасибо

Answer 1

$.getScript('script.js',function(){
  //this is your callback function to execute after the script loads
});

getScript должен работать нормально. Пока скрипт загружается (я полагаю, на действие или что-то?), Показывает сообщение о загрузке и вызывает getScript, затем в области обратного вызова измените текст с надписью «загрузка» на «сделано» и выполните все, что вы хотите.

Answer 2

Загрузите скрипт в iframe, и он должен иметь его в кеше. Это также может работать, если вы попытаетесь добавить его в качестве источника тега img. Как только остальные ваши компоненты будут загружены, вы можете добавить тег script со своим большим скриптом, чтобы он загружался на страницу. Я не уверен, что это исправит ваши проблемы. Вы уверены, что хотите «предварительно загрузить» или просто подождать, пока ваша страница завершит рендеринг, а затем загрузить свой большой JS-скрипт?

Если вы хотите последнее, то вам следует подождать, пока не произойдет событие load или document ready, чтобы загрузить скрипт.

Совет. Вы также можете разместить скрипт в отдельном (суб) домене. Это позволяет некоторым браузерам загружать больше ресурсов параллельно, чтобы не блокировать загрузку остальной части сайта, хотя многие новые браузеры делают это по умолчанию.

Answer 3

Это текущий стандарт:

<link href="/js/script-to-preload.js" rel="preload" as="script">
...

или вы можете просто добавить его

var preloadLink = document.createElement("link");
preloadLink.href = "script-to-preload.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

тогда, когда вы хотите его использовать:

<script src="/js/script-to-preload.js"></script>

или

var preloadedScript = document.createElement("script");
preloadedScript.src= "/js/script-to-preload.js";
document.head.appendChild(preloadedScript);

чтобы проверить, совместим ли ваш браузер с ним, просто используйте этот фрагмент кода: https://gist.github.com/yoavweiss/8490dabb3e0aa112fc74

в случае, если он не поддерживается, вы можете использовать устаревший prefetch вместо preload

Источник:

https://w3c.github.io/preload/#x2.link-type-preload

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/supports