1》场景:
现在有多个异步操作ajax请求,我们需要当所有异步请求都成功的时候,执行后续操作
2》方法
方法一:通常的讲,我们可以设置一个flag变量,然后在各自的ajax的成功回调内去维护这个变量数量,当满足条件时,我们来触发后续函数
方法二:
jq的$.when().done()
$.when(
$.ajax(),
$.ajax(),
$.ajax() ).done(fn).fail(fn);
当内部传入的3个ajax都执行了成功的回调, done里的函数才会被触发,
而当有一个ajax执行失败了,fail就被触发。
方法三:
Promise.all([promise1,promise2]).then(function(){})
3》网页加载完成
window.onload=function(){
alert("网页加载完毕")
}
document.onreadystatechange=function(){
if(document.readyState=='complete'){
alert("加载完")
}
}
4》图片加载完成
方法一:onload
通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法)
document.getElementById("img1").onload=function(){
alert("图片加载完")
}
方法二:
判断img对象(DOM)的complete属性(兼容所有浏览器)
var timer=setInterval(function(){
if(document.getElementById("img1").complete){
clearInterval(timer);
alert("图片加载完")
}
},10)
方法三:
.onreadystatechange事件(该方法仅在ie下可用)
document.getElementById('img1').onreadystatechange = function() {
if(document.getElementById('img1').readyState=="complete"||document.getElementById('img1').readyState=="loaded"){
alert("图片加载完")
}
}
补充多张图片:
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 ){
//全部加载完成
}
}
}
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)=>{
//全部加载完成
})