前端预加载实现的几种方式

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function preloader() {  
if (document.images) {  
var img1 = new Image();  
var img2 = new Image();  
var img3 = new Image();  
img1.src = "http://domain.tld/path/to/image-001.gif";  
img2.src = "http://domain.tld/path/to/image-002.gif";  
img3.src = "http://domain.tld/path/to/image-003.gif";  
}  
}  
function addLoadEvent(func) {  
var oldonload = window.onload;  
if (typeof window.onload != 'function') {  
window.onload = func;  
} else {  
window.onload = function() {  
    if (oldonload) {  
        oldonload();  
    }  
    func();  
}  
}  
}  
addLoadEvent(preloader);

ajax实现预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function() {  
setTimeout(function() {  
// XHR to request a JS and a CSS  
var xhr = new XMLHttpRequest();  
xhr.open('GET', 'http://domain.tld/preload.js');  
xhr.send('');  
xhr = new XMLHttpRequest();  
xhr.open('GET', 'http://domain.tld/preload.css');  
xhr.send('');  
// preload image  
new Image().src = "http://domain.tld/preload.png";  
}, 1000);  
};

资源文件预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function() {  

setTimeout(function() {  

var head = document.getElementsByTagName('head')[0];  

var css = document.createElement('link');  
css.type = "text/css";  
css.rel  = "stylesheet";  
css.href = "http://domain.tld/preload.css";  


var js  = document.createElement("script");  
js.type = "text/javascript";  
js.src  = "http://domain.tld/preload.js";  

head.appendChild(css);  
head.appendChild(js);  
 
new Image().src = "http://domain.tld/preload.png";  

}, 1000);  
}