Pre-loading files generally have two common ways: xhr and dynamically inserting nodes. Dynamic Insert node is the simplest and most extensive asynchronous loading method (such as Yui's Get module), and then use the dynamic Insertion node method loaded files will be executed immediately after loading, JavaScript execution will occupy the browser JS execution process, on the other hand may also change the page structure, and the implementation of CSS is more likely to make the entire page change. XHR mode will not execute script, but due to the same domain restrictions, and now the static Web site is deployed in the CDN server, how to preload the CSS JS file also become a bit mysterious.
Stoyan Stefanov wrote a concise description of a way to load a file without executing it. The original text is visible http://www.phpied.com/preload-cssjavascript-without-execution/
The specific approach is to use the new Image () src to preload the file in IE, while other browsers use the dynamically inserted <object> tag to complete the load.
Some of the code is as follows
Copy Code code 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
A few notes:
1. The new image (). SRC cannot be used in FF because FF implements a separate cache of pictures. Safari and Chrome also don't seem to be cached.
2. Dynamically inserted object tags need to be inserted into the non-head section to trigger loading.
3. IE7 IE8 can also use dynamic object loading files with some code (as mentioned in the code comment). But the author finds that object usually consumes a lot, so ...
Through their own experiments to find quite good, there is a need for students may wish to try.
