[Pre-load of the turn]css,javascript

In order to improve the loading speed of the website, it is very important to do a pre-loading of a file in the upstream site during user browsing. Preloaded files generally have two common ways: xhr and dynamically inserting nodes. Dynamic Insert node is the simplest and most extensive asynchronous loading mode (such as Yui's Get module), and then use the dynamic Insert node method to load the file will be executed immediately after loading, JavaScript execution on the one hand will occupy the browser JS execution process, on the other hand may change the page structure, CSS execution is more likely to make the entire page change. Although the XHR method does not execute the script, but because of the same domain constraints, and today's site static files are deployed on the CDN server, how to preload CSS JS file is a bit more mysterious.

Stoyan Stefanov wrote a concise description of a method of loading a file without allowing it to be executed. Text Visible http://www.phpied.com/preload-cssjavascript-without-execution/

Specifically, IE uses new Image (). src to preload the file, while other browsers use the dynamically inserted <object> tag to complete the load.

Some of the code below

1Window.onload=function() {
2
3 VarI=0,
4Max=0,
5O=Null,
6
7//List of stuff to preload
8Preload=[
9 ‘http://tools.w3clubs.com/pagr2/<?php echo $id;? >.sleep.expires.png‘,
10‘http://tools.w3clubs.com/pagr2/<?php echo $id;? >.sleep.expires.js‘,
11‘http://tools.w3clubs.com/pagr2/<?php echo $id;? >.sleep.expires.css‘
12],
13Isie=Navigator.appName.indexOf (‘Microsoft‘)===0;
14
15For(I=0, Max=Preload.length; I<Max I+=1) {
16
17If(Isie) {
18NewImage (). src=Preload[i];
19Continue;
20}
21stO=Document.createelement (‘Object‘);
22O.data=Preload[i];
23
24//IE stuff, otherwise 0x0 is OK
25 //O.width = 1;
26//O.height = 1;
27//o.style.visibility = "hidden";
28//O.type = "Text/plain"; Ie
29O.width=0;
30O.height=0;
31
32// only ff appends to the head
33         //  all others require body
Span style= "color: #008080;" >34          document.body.appendchild (o);
35 &NBSP;&NBSP;&NBSP;&NBSP;}
36 
37  };
38&NBSP;

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

A few notes:

1. New image (). SRC cannot be used in FF because FF implements a separate set of caches for pictures. Both Safari and chrome don't seem to be cached either.

2. The dynamically inserted object tag needs to be inserted into the non-head section to trigger the load.

3. IE7 IE8 can also use dynamic object to load files with some code (as mentioned in the code comments). But the author finds that object usually consumes a lot, so ...

Through their own experiments found quite good, the needs of students may wish to try.

[Pre-load of the turn]css,javascript