Preliminary script file

Question

There are many plugins for preloading images, but is there a way to preload javascript? My application uses a large js file, and it takes about 5 seconds or so to load the page to load ... so is there a way to show the "boot message" while I preload the script somehow? (Like "Loading ...", like in Gmail)

thank

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 (am I suggesting an action or something?), Show the message to load and call getScript, then in the callback area change the text that says “download” to “done” and do whatever you want.

Answer 2

Load the script in an iframe and it should be cached. It may also work if you try to add it as the source of the img tag. After the rest of your components are loaded, you can add a script tag with a large script so that it loads onto the page. I am not sure if this will fix your problems. Do you really want to “preload” or just wait for your page to complete and then load a large JS script?

If you want to use the latter, then you must wait until the load or document ready event occurs to load the script.

Tip. You can also put the script in a separate (optional) domain. This allows some browsers to load more resources at the same time, so it does not block the download of the rest of the site, although by default many new browsers do this.

Answer 3

This is the current standard:

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

or you can just add 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 piece of code: https://gist.github.com/yoavweiss/8490dabb3e0aa112fc74

If it is not supported, you can use the deprecated prefetch instead of preload

Source:

https://w3c.imtqy.com/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