单张图片(图片动态生成)
//js
var logo = new Image();
logo.src = 'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/javascript-logo.png';
logo.onload = function(){
// 加载完成
};
单张图片(结合ES6 Promise)
//js
new Promise((resolve, reject)=>{
let logo = new Image();
logo.src = 'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/javascript-logo.png';
logo.onload = function(){
// 加载完成
resolve(logo)
};
}).then((logo)=>{
//code
})
多张图片
var img = [],
flag = 0,
mulitImg = [
'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/javascript-logo.png',
'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/es6-logo.jpeg',
'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/git-logo.jpeg'
];
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 = [
'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/javascript-logo.png',
'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/es6-logo.jpeg',
'https://mstcdn.oss-cn-shenzhen.aliyuncs.com/images/logo/git-logo.jpeg'
];
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)=>{
//全部加载完成
})
转载:http://www.mianshiting.com/#/article/197