Preload script file

Question

There are numerous plug-ins to preload images, but is there a way to preload javascript? My application uses a big js file and it take about 5 seconds or so to load before the page shows... so, is there a way I can display a "loading message" while I somehow preload the script? (A sort of 'Loading...' like in Gmail)

Thanks

Answer 1

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

getScript should work fine. While the script is loading (I assume on an action or something?) show the loading message and call getScript, then in the callback area, change the text that says "loading" to "done" and execute whatever you want.

Answer 2

Load the script in an iframe and it should have it cached. It may also work if you try to add it as the source for an img tag. Once the rest of your components are done loading, then you can add the script tag with your big script so it's loaded onto the page. I am not sure that will fix your problems though. Are you sure you want to "preload" or just wait until your page is done rendering and then load your big JS script?

If you want the latter, then you should wait until either the load or document ready event has fired to load the script.

Tip: You can also put the script on a separate (sub)domain. That allows some browsers to load more resources in parallel so it doesn't block the rest of the site from loading, although many new browsers do that by default.

Answer 3

This is the current standard:

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

or you can just append it

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

then when you want to use it:

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

or

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

to check if your browser is compatible with it just use this snippet of code: https://gist.github.com/yoavweiss/8490dabb3e0aa112fc74

in case it isn't supported you can use the deprecated prefetch instead of preload

source:

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