js预加载图片方法汇总

更新时间：2026-05-10 22:35:46作者：zhao

本文实例汇总了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：

<![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：

<![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 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 <head>

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程序设计有所帮助。