js预加载图片方法汇总

本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下：
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：

<div class="hidden"><script type="text/javascript"><！--//--><！[CDATA[//><！--var images = new Array（）function preload（） {for （i = 0; i < preload.arguments.length; i++） {images[i] = new Image（）images[i].src = preload.arguments[i]}}preload（"http://domain.tld/gallery/image-001.jpg","http://domain.tld/gallery/image-002.jpg","http://domain.tld/gallery/image-003.jpg"）//--><！]]></script></div>

4. JS代码2：

<div class="hidden"><script type="text/javascript"><！--//--><！[CDATA[//><！--if （document.images） {img1 = new Image（）;img2 = new Image（）;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";}//--><！]]></script></div>

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 CSSvar 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 imagenew Image（）.src = "http://domain.tld/preload.png";}, 1000）;};

7. Ajax代码2：

window.onload = function（） {setTimeout（function（） {// reference to <head>var head = document.getElementsByTagName（"head"）[0];// a new CSSvar css = document.createElement（"link"）;css.type = "text/css";css.rel = "stylesheet";css.href = "http://domain.tld/preload.css";// a new JSvar js = document.createElement（"script"）;js.type = "text/javascript";js.src = "http://domain.tld/preload.js";// preload JS and CSShead.appendChild（css）;head.appendChild（js）;// preload imagenew Image（）.src = "http://domain.tld/preload.png";}, 1000）;};

希望本文所述对大家的javascript程序设计有所帮助。