在此之前来了解一下jquery的ready与window.onload的区别,ready只是dom结构加载完毕,便视为加载完成。(此时图片没有加载完毕),onload是指dom的生成和资源完全加载(比如flash、图片)出来后才执行。
一、单张图片(图片在文档中)
// HTML
<img id='xiu' src="/images/logo.png">
//js
$(document).ready(function(){
//jquery
$('#xiu').load(function(){
// 加载完成
});
//原生 onload
var xiu = document.getElementById('xiu')
xiu.onload = xiu.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
// 加载完成
}
};
})
注:
1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。
3、以下内容省略兼容
二、单张图片(图片动态生成)
//js
var xiu = new Image()
xiu.src = '/images/logo.png'
xiu.onload = function(){
// 加载完成
}
三、单张图片(结合ES6 Promise)
//js
new Promise((resolve, reject)=>{
let xiu = new Image()
xiu.src = '/images/logo.png'
xiu.onload = function(){
// 加载完成
resolve(xiu)
}
}).then((xiu)=>{
//code
})
四、多张图片
var img = [],
flag = 0,
mulitImg = [
'/images/logo.png',
'/images/logo.png',
'/images/logo.png',
'/images/logo.png'
];
var imgTotal = mulitImg.length;
for(var i = 0 ; i < imgTotal ; i++){
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function(){
//第i张图片加载完成
flag++
if( flag == imgTotal ){
//全部加载完成
}
}
}
五、多张图片(结合ES6 Promise.all())
let mulitImg = [
'/images/logo.png',
'/images/logo.png',
'/images/logo.png',
'/images/logo.png'
];
let promiseAll = [], img = [], imgTotal = mulitImg.length;
for(let i = 0 ; i < imgTotal ; i++){
promiseAll[i] = new Promise((resolve, reject)=>{
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = function(){
//第i张加载完成
resolve(img[i])
}
})
}
Promise.all(promiseAll).then((img)=>{
//全部加载完成
})