|
在项目中，我们会遇到这样的需要，
判断多图片加载完成， 或者 多个接口是否加载完成 原理大致相同，本文就以判断多图片加载为例 01 单张图片 还是，先来看看单张图片 onreadystatechange 方法 var myImage= document.getElementById('myImage')
myImage.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
// 加载完成
}
}注：readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。onload方法 document.getElementById("myImage").onload = function () {
alert("图片加载已完成");
}结合promise new Promise((resolve, reject)=>{
let myImage= new Image()
myImage.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg'
myImage.onload = function(){
// 加载完成
resolve(myImage)
}
}).then((myImage)=>{
//code
});02 多张图片 如何判断多张图片加载完成呢？大家可以先思考下，在看下面的方法 方法一： var img = [],
flag = 0,
imgArr= [
'http://bugshouji.com/banner1.jpg',
'http://bugshouji.com/banner2.jpg',
'http://bugshouji.com/banner3.jpg',
'http://bugshouji.com/banner4.jpg'
];
var imgTotal = imgArr.length;
for(var i = 0 ; i < imgTotal ; i++){
img[i] = new Image()
img[i].src = imgArr[i]
img[i].onload = function(){
//第i张图片加载完成
flag++
if( flag == imgTotal ){
//全部加载完成
}
}
}分析：上面的方法，主要是通过onload事件与flag的值来判断多张图片是否加载完成 方法二： letimgArr= [
'http://bugshouji.com/banner1.jpg',
'http://bugshouji.com/banner2.jpg',
'http://bugshouji.com/banner3.jpg',
'http://bugshouji.com/banner4.jpg'
];
let promiseAll = [], img = [], imgTotal = letimgArr.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)=>{
//全部加载完成
})分析：上面的方法，主要是通过onload事件与Promise.all方法结合来判断多张图片是否加载完成 [p]以上，就是判断单张图片与多张图片加载完成的方法，欢迎留言补充[/p] |
|
|
公众号
