[jQuery] Preload script file

Question

Hi. 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

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 2

$.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.