js judgment leaflets, multiple pictures loaded

1, a single image (dynamically generated images)

// JS 
 var Xiu = new new Image () 
 xiu.src = 'http://static.igeekee.cn/scenelogo/default.png' 
 xiu.onload = function () {
     // loaded 
 }

2, a single image (combined ES6 Promise)

new Promise((resolve, reject)=>{
        let xiu = new Image()
        xiu.src = 'http://static.igeekee.cn/scenelogo/7tianliansuo.jpg'
        xiu.onload = function(){
           // 加载完成 
           resolve(xiu)
        }
     }).then((xiu)=>{
       // code
        console.log(xiu)
     })

3, multiple images (js)

var img = [],  
    flag = 0, 
    mulitImg = [
    'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg',
    'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg',
    'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg',
    'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg'
 ];
 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-loaded photos 
       In Flag ++ IF (In Flag == imgTotal) {
           // all loaded        } 
    } 
 }
       

4, multiple images (combined ES6 Promise.all ())

let mulitImg = [
        'http://static.igeekee.cn/scenelogo/zhongguoyinhang.png',
        'http://static1.igeekee.cn/2_1487751969296_2872.jpg',
        'http://static1.igeekee.cn/25_1488621623561_6152.jpg',
        'http://static.igeekee.cn/scenelogo/pizzahut.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(){
                resolve(img[i])
            }
        })
    }
    Promise.all(promiseAll).then((img)=>{
        console.log('加载完成')
    })

 

Guess you like

Origin www.cnblogs.com/chailuG/p/12511104.html