js中Image对象以及对其预加载处理示例

不显示在文档中的 Image 对象

对于不显示在文档中的 Image 对象时用 var 语句定义的：

复制代码 代码如下:

var myImage = new Image();或
var myImage = new Image(<图片地址字符串>);

复制代码 代码如下:

var imagePreload = new Image();

imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';

复制代码 代码如下:

function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < arguments.length; i++) {
imgPreload.src = arguments[i];
}
}

imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');

复制代码 代码如下:

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;

if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}

img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};