- 1. 使用Image()对象预加载图片：
- 2. 使用img.onload，当图片加载完成时执行操作：
- 3. 判断图片是否已经加载完成则：需要判断 img.complete属性是否为true：
- 4. 优化刚刚的预加载函数，封装一个预加载非固定数目图片的函数
- 5. Image对象的其他方法：
使用Image()对象预加载图片：
var imgsSrcArray = [src1, src2, src3, src4, src5];
需要预加载这些图片，以便点击上一张或下一张按钮的时候，能显示对应的图片。
使用JS自带的 Image对象 实现图片预加载：
[javascript]
var images= [];
var len = imgsSrcArray.length;
for(var i = 0; i < len; i++) {
var img = new Image();
img.src = imgsScrArray[i];
images.push(img)
}
[/javascript]
这样就实现了将多个图片进行了预加载，缓存到了images数组里。
使用img.onload，当图片加载完成时执行操作：
[javascript]
img.onload = function(){
// console.log(‘图片加载完成’)
};
[/javascript]
判断图片是否已经加载完成则：需要判断 img.complete属性是否为true：
if (img.complete) {
// 执行操作
}
优化刚刚的预加载函数，封装一个预加载非固定数目图片的函数
[javascript]
var images = [];
function preloadImgs() {
// 利用arguments参数判断需要加载的图片数目
var len = preloadImgs.arguments.length;
for (var i=0; i<len; i++) {
images[i] = new Image();
images[i].src = preloadImgs.arguments[i];
}
}
[/javascript]
// 或传入数组
[javascript]
var images = [];
function preloadImgs(srcArray) {
// 利用arguments参数判断需要加载的图片数目
var len = preloadImgs.arguments.length;
for (var i=0; i<len; i++) {
images[i] = new Image();
images[i].src = srcArray[i];
}
}
[/javascript]
Image对象的其他方法：
img.onabort() 图片加载被中断时执行
img.onload() 图片加载成功时执行
img.onerror() 图片加载失败时执行