Introduction to methods and examples of javascript preloading images, css, and js_javascript skills

The advantage of preloading is that the web page can be presented to the user faster. The disadvantage is that it may increase useless requests (but static files such as images, css, and js can be cached). If the css and js in the page the user visits , pictures are preloaded, users will open the page much faster, improving user experience. When using some large pictures to display, preloading large pictures is a very good method, so that the pictures can be presented to users faster. Not much to say, as a front-end siege master, everyone knows it. Let me share the tests I did and the results.

First let’s talk about the status code returned by the server that you need to know:
status-code: 200 - The client request is successful
status-code: 304 - The file is already in the browser cache. The server tells the client that it turns out that Buffered documents can continue to be used.
This article tests to determine whether the file has been cached. It is used to determine whether 304 is returned.

The following is a test of several preloading methods by loading img/js/css in different browsers, mainly including new Image(), object, and iframe. The js, css, and image files for the following loading test were found from several portal websites (why did you find a few? It was to test as many special situations as possible, and we actually encountered them during the test).
1. Preload with new Image() for testing
1.1. Load new Image()

Copy code Code As follows:

new Image().src = 'http://img02.taobaocdn.com/tps/i2/T1iQhUXnxpXXXXXXXX-171-48.png'; //Taobao
new Image ().src = 'http://static.paipaiimg.com/module/logo/logo_2011_02_22.png'; //Paipai
new Image().src = 'http://co.youa.baidu. com/picture/services/images/logo.png'; //Yes
new Image().src = 'http://img1.t.sinajs.cn/t35/style/images/common/header/ logoNew_nocache.png'; //Sina*/

Then add the image to the page:

There is nothing to say about loading images. IE6-9/CM/FF/OP/ all return 304, and the preloading is successful.
1.2. Test using new Image() to load css

Copy the code The code is as follows:

new Image().src = 'http://a.tbcdn.cn/p/global/1.0/global-min.css'; //Taobao(1)
new Image().src = 'http ://static.paipaiimg.com/member/activate.css'; //Paipai (2)
new Image().src = 'http://co.youa.baidu.com/picture/services/ base.css'; //Yes (3)
new Image().src = 'http://img1.t.sinajs.cn/t35/skin/skin_008/skin.css'; //Sina( 4)
// http://auto.sina.com.cn/css/newstyles.css
// You can use this to test the situation where the Expires setting time under IE is less than the current time

Add the css to the page

This is different:
CM/OP both return 304 (regardless of whether Expires is set or not).
FF, all returned 200.
IE, 1/2/4 all return 304, while 3 returns 200. Comparing the returned HTTP-Header, we can find that 1/2/4 all have Expires expiration time set, while 3 does not.
Explanation: The cache under IE needs to set Expires (and the set time must be greater than the current time), and FF does not support preloading using new Image().
1.3. Test using new Image() to load js

Copy code The code is as follows:

new Image().src = 'http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js'; //Taobao (1)
new Image().src = 'http://static.paipaiimg.com/js/pp.noticeBoard.js'; //Paipai(2)
new Image().src = 'http://co.youa.baidu.com/ picture/services/cms_core.js'; //Yes (3)
new Image().src = 'http://js.t.sinajs.cn/t35/miniblog/static/js/top.js '; //Sina(4)
new Image().src = 'http://shop.qq.com/act/static/week/fri/bang/day_1_p_0_10.js'; //QQ(5)

Add js to the page.

CM/OP, both return 304
FF, only 5 returns 304, and only 5 HTTP-Header is the simplest (including: Date, Server, Expires, Cache-Control).
The other response headers have more content, but they all have the ones in 5 set. Looking for patterns, I found that several other response headers have: Content-Type: text/javascript, but 5 does not have this.
IE, 2/5 returned 304, and 1/3/4 returned 200. Comparing the response headers, it should still be affected by Content-Type. Content-Type was not seen in 2/5 in IE.
In addition, thanks to Andrew Zhang (http://www.cnblogs.com/AndyWithPassion/) for mentioning that when image preloading js is viewed under httpwatch under IE, the loading of resources is not complete. The same is true for my test here. There seems to be a byte limit. In the test, 2 returned complete data, while 5 had part of the content lost. So using new Image to load JS is not advisable at all.

To summarize here: preloading images using new Image() has no problem with compatibility. However, only OP/CM can work with css/js, and IE/FF is basically invalid (IE/FF have a tacit understanding of this).
2. Test object preloading

var doc = document,
obj = doc.createElement('object');
//obj.data = '123.js'; //Ps: Writing this way will be invalid for the OP (it will change the data The content is used as the text node in the object tag)
                                                                                                                       // obj.setAttribute('data', '123.js');                                                         . ;top:-1px;width:1px;height:1px;';
                                     ; The object tag needs to be inserted into the non-head part to trigger loading */
                                                                                                                                                                                                             //obj.onload = function(){ alert('loaded') }; // FF/OP/Webkit support (if data is an image, IE9 Also possible)

Then load the file with data in the object, create a tag and add it to the HTML for testing.

Test results:

FF/OP/CM: Whether it is img/js/css, 304 is returned.

IE6-8: Use object to load img/js/css, which will be directly Aborted.
IE9 is special:
IE9 loads js/css, first requests and returns HTTP200, then requests and Aborted, here is actually one request (the second time Aborted).
When IE9 loads img, it first requests and returns HTTP200, and then requests and returns the image, so the image needs to be requested twice.

The content returned by the first request of IE9 is empty (and the browser will usually get stuck or lose response directly at this time). IE9 will first request the URL, get the file type, Aborted if it is JS/CSS, and load it if it is an image.

As for the first request of IE9, it probably relies on reading the HTTP header information to obtain the file type, or secretly downloading the file, and then testing the file type in the sandbox.

An interesting thing, such as using object to load JS, IE9 can sometimes load it, that is, the first request does not determine that the file is JS (it depends on your luck if you want to see this, it seems possible when the network speed is slow) happen)

It is said that in the past, IE relied on file suffix to determine the file type. Later, it used HTTP header information to determine, and they can be forged, so object has security issues under IE.

IE6/7, if the file suffix is ​​.js/.css, the request will not be sent. If it is changed to http://xxx/test.js?123.png, the request will be sent, and then imported with the script tag. Found that it can be cached (css is OK^^).

IE8 will not issue a request if the suffix is ​​js/css. If you change the suffix to png, you can issue a request and get the content. Then the page creation tag will be introduced, and the file will not be cached. But if the file is a real image, it will be cached.
Digression: From the above, we can find that with the upgrade of IE, security is getting higher and higher.

So, the conclusion here is: you can use object preloading in FF/OP/CM, but never use it in IE.

3. Test iframe preloading

First create page a.html, and then add the following js.

Copy code The code is as follows:

var doc = document,
ifm = doc.createElement("iframe");
//ifm.id="preLoadIfm";
// ifm.style.border = ifm .width = ifm.height = 0;
                         ifm.style.cssText = 'position:absolute;top:-10px; border:0; width:1px; height:1px;'; no";
doc.body.appendChild(ifm);
window.onload = function(){ // Preloading is preferably triggered after window.onload
//To trigger onload, you need to first appendChild, and then write onload (if the order is reversed, it cannot be triggered under IE)
                                                                                                                                                                , contentDocument-IE9/FF/OP/CM supports
var ifmDoc = ifm.contentDocument || ifm.contentWindow.document;
ifmDoc.open();
ifmDoc.write(' ');
                           //ifmDoc.write('> ;'); // Used for testing
                                                                                                                                                                                                                                                                            ('

test

test

test

test

test

'); // Used to test > // Start loading
ifmdoc.write ('& lt; link rel = "styleSheet" href = "http: //localHost/123.css? 2011"/& gt;');
                  ifmDoc.write(''); //If you don’t add defer, you will find that IE will freeze. .
        ifmDoc.write('');
           ifmDoc.write(' ');
                                      ifmDoc.close();
Then create a new page b.html, add the file to be preloaded above to the html, and test whether it has been preloaded.
Result: IE/FF/OP/CM are all successfully preloaded.

What needs to be explained is: after opening a.html and refreshing the page, the file is loaded in the iframe.
FF, returns 200 (note that this 200 is not the 200 returned by the server, but the request cache is successful. Because the time when the request is sent is displayed as 0).
CM, the displayed status is (from cache).
OP, although the displayed status is n/a, it is also from cache. IE, the debugging tool that comes with IE displays 304, and HttpWatch displays from cache.

Test environment:
WIN7 EN SP1: OP 11.50, IE7-9, FF 3.6/6.0, Chrome 10
XP EN SP3: IE6
XP EN SP3: IE7
XP CN SP3: IE8
Tools: IE9’s built-in debugging tools, HttpWatch, firebug, chrome’s built-in debugging tools, Opera Dragonfly.

Final conclusion: using new Image() to preload js images is basically enough. However, css and js are special. When using object, you need to determine the browser. If you consider that js, css, and img are all compatible with preloading, you can consider using iframe.

In addition, after the above method creates the iframe, do not use write() to write the file to be loaded, directly set iframe.src = "cache.html", and then write the file to be preloaded in cache.html. It is feasible (I have read an article before that introduced how Sina Weibo does this, but the article address cannot be found, nor can I find it in the search). I have saved the cache URL: http://tjs.sjs.sinajs.cn/ miniblog2/static/html/cache.html, but I couldn’t find it when I looked at the homepage of Weibo. I don’t know which page it is used on.
A little addition to other preloads

doc.createElement('script') can preload js. If there are operations on the page in js, it will have an impact on the page.
doc.createElement('link') can preload css, but it may also affect the style of the current page.
So preloading like this is not advisable.
Use ajax to load img/js/css. The compatibility is good and the files can be cached. However, it can only be restricted to the same domain, so the scope of use is limited.
Preloading images can also be achieved using CSS background images. The awesome lifesinger has written an article about HTTP requests for images before, but the previous data on his blog is gone. I found an article online: http://www.jb51.net/web/110275.html. The article mentioned using background images and hidden img tags to preload, and the adjustment is very clear. Can also be used as a reference.

In addition, I imitated Sina’s cache.html and wrote it myself. If you like to use iframe as a separate file, you can use it as a reference.

Copy code The code is as follows:

   
    <script><BR>    //usage： cache.html?v=123<BR>    var win = window,<BR>            doc = document,<BR>            head = doc.getElementsByTagName("head")[0],<BR>            getQuery = function(){<BR>                    var ret = {},<BR>                            sch = win.location.search,<BR>                            arr,<BR>                            tmp;<BR>                    if (sch) {<BR>                            sch = sch.substr(1);<BR>                            arr = sch.split("&");<BR>                            for(var i = 0, j = arr.length; i < j; i ) {<BR>                                    tmp = arr[i].split('=');<BR>                                    ret[tmp[0]] = tmp[1];<BR>                            }<BR>                    }<BR>                    return ret;<BR>            },<BR>            version = getQuery().v || '';<BR>    win.onerror = function(){return true}; //屏蔽js错误提示<BR>    win.onload = function(){<BR>            var b = doc.createElement("script");<BR>            b.src = 'http://xx/1.js?v=' version;<BR>            head.appendChild(b);<BR>            //...<BR>    };<BR>    doc.write('<link rel="stylesheet" href="http://xxx/3.css?version=' version '" />');<BR>    </script>