1. 纯css：
#preload-01 {background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;}#preload-02 {background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px;}#preload-03 {background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;}
2. js+css优化：
// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/function preloader() { if (document.getelementbyid) { document.getelementbyid(preload-01).style.background = url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; document.getelementbyid(preload-02).style.background = url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; document.getelementbyid(preload-03).style.background = url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }}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);
3. js代码1：
4. js代码2：
5. js代码优化2：
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);
6. ajax代码1：
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);};
7. ajax代码2：
window.onload = function() { settimeout(function() { // reference to var head = document.getelementsbytagname('head')[0]; // a new css var css = document.createelement('link'); css.type = text/css; css.rel = stylesheet; css.href = http://domain.tld/preload.css; // a new js var js = document.createelement(script); js.type = text/javascript; js.src = http://domain.tld/preload.js; // preload js and css head.appendchild(css); head.appendchild(js); // preload image new image().src = http://domain.tld/preload.png; }, 1000);};
希望本文所述对大家的javascript程序设计有所帮助。