Pre-load CSS or Javascript JS Code

There are two common methods to pre-load files: xhr and dynamic node insertion. Dynamic node insertion is the simplest and most extensive asynchronous loading method (for example, the get module of Yui), and files loaded using the dynamic insert node method will be executed immediately after loading, on the one hand, Javascript execution occupies the browser JS execution process, and on the other hand, the page structure may be changed, while CSS execution is more likely to change the whole page. Although xhr does not execute scripts, but due to the restrictions of the same domain, and now the static files of the website are deployed on the CDN server, it is also a little mysterious how to pre-load css js files.

Stoyan Stefanov provides a concise description of a method for loading files without allowing them to be executed. Raw visible http://www.phpied.com/preload-cssjavascript-without-execution/

The specific method is to use new image (). Src in IE to pre-load the file, while other browsers use the dynamically inserted <Object> label to load the file.
PartCodeAs follows:

Copy code The Code is as follows: 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 );
}
};

Demo visible http://phpied.com/files/object-prefetch/page1.php? Id = 1

Notes:
1. The reason why new image (). SRC cannot be used in FF is that FF implements a separate set of cache for the image. At the same time, Safari and chrome do not seem to be cached.

2. dynamically inserted object labels need to be inserted into non-head parts to trigger loading.

3. IE7 IE8 can also use some code to load files using dynamic objects (as mentioned in code annotations ). However, the author found that the object usually consumes a lot, so...

I found it quite good through my own experiments. If you need it, try it.