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('