Pre-load JS, but don't run it

Question

I want to preload a large JS file after the page loads, so when I link to this JS file on the desired page, it is already loaded and cached.

I basically do this at the moment, and it works, but of course it is not:

preload_js = new Image(); preload_js = "http://domain.com/files/file.js"; 

It seems such a quick and easy method, no Ajax is needed, etc., and it works great.

What is the right way to do this? Of course, not with Ajax, as that seems redundant for this.

I know many ways to load JS, but they all seem to actually run the code after the script loads, which I don't want.

I do not want to use jQuery (or any library), it should be plain JS. Thanks for any help.

Answer 1

Given the problems with cross-domain with Ajax, especially since on the server you have no control over the file (for example, Google CDN hosting jQuery), this is my solution:

(1) Use the document.createElement ('object') element in the Simon M solution for Firefox, as this works great.

(2) Use the new Image.src function for every other browser. Opera, Safari and Chrome love this. In addition, I already mentioned that Mobile Safari is not working. Ok, but for some reason it takes 100 ms, checking something (it caches correctly and not just returns 304 unchanged). I can live with 100 ms.

I have not tested other mobile browsers.

(3) It gets into IE because nothing works.

Answer 2

From this blog post :

Preloading components in advance is good for performance. There are several ways to do this. But even the cleanest solution (open an iframe and go crazy there) comes at a price - the price of an iframe and the cost of parsing and executing pre-loaded CSS and JavaScript. There is also a relatively high risk of potential JavaScript errors if preloading a script assumes that it is loaded in a page different from the one preloaded.

After some trial and error, I think I came up with something that can work in a cross browser:

• in IE use new Image().src to preload all types of components
• all other browsers use the dynamic <object>

In this example, I assume that the page prefetches after loading the components that will be needed on the next page. The components are CSS, JS and PNG (sprite).

 window.onload = function () { var i = 0, max = 0, o = null, // list of stuff to preload preload = [ 'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png', 'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js', 'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css' ], isIE = navigator.appName.indexOf('Microsoft') === 0; for (i = 0, max = preload.length; i < max; i += 1) { if (isIE) { new Image().src = preload[i]; continue; } o = document.createElement('object'); o.data = preload[i]; // IE stuff, otherwise 0x0 is OK //o.width = 1; //o.height = 1; //o.style.visibility = "hidden"; //o.type = "text/plain"; // IE o.width = 0; o.height = 0; // only FF appends to the head // all others require body document.body.appendChild(o); } }; 

See message for details.

---

EDIT: Looking at the comments on this post, someone mentions this link which talks about problems with the new Image() preload method in IE and other browsers. Here is an excerpt:

When IE encounters an IMG tag, it creates an image object and assigns a download request to it. Since the data comes from the image download, it is fed to the image decoders of the browser. Decoders will reject the data as invalid if you feed it in plain text, which seems reasonable as they cannot use such data. When the decoders reject the data as "Impossible image", the image object will interrupt its processing. As part of this interrupt, if the download is not completed, it is also interrupted.

This explains the behavior mentioned by OP in the comment below (IE9 only downloads 4 KB files).

It seems that your only reliable cross-browser option might be to use Ajax ...

Answer 3

USING

 window.document.onload =function(){ preload_js = "http://domain.com/files/file.js"; } 

window.document.onload make sure the java script will not work until you are ready to work