前端開發(fā)制作中有需要需要等到頁面中的圖片加載完畢后才執(zhí)行某些事件，而使用jquery的load事件只是dom執(zhí)行完畢，圖片未必加載完成，如果要判斷圖片加載完畢，需要在圖片標簽上判斷。

使用JavaScript判斷圖片加載完畢，如果圖片在頁面中的某個img標簽中的話，可以用下面這個

$('img').on('load', function() {

    alert('new image loaded: ' + this.src);

});

原生js

imgNode.onload = () => {

    alert('new image loaded: ' + this.src);

};

（1）、單張圖片（圖片在文檔中）

// HTML

<img id='pic' src="../03.png">  

//js

 $(document).ready(function(){

    //jquery

    $('#pic').load(function(){

       // 加載完成 

    });

   //原生  onload

    var pic = document.getElementById('pic')

    pic.onload = pic.onreadystatechange = function(){

       if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){

           // 加載完成 

       }

    };

})

注：

1、IE8及以下版本不支持onload事件，但支持onreadystatechange事件；

2、readyState是onreadystatechange事件的一個狀態(tài)，值為loaded或complete的時候，表示已經加載完畢。

3、如果引入jquery庫可以考慮直接使用jquery的load事件來解決兼容問題。

（2）、單張圖片（圖片動態(tài)生成）

//js

var pic = new Image()

pic.src = '../03.png'

pic.onload = pic.onreadystatechange = function(){

if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){

// 加載完成 

}

};

//jquery

$('<img/>').attr('src', '../03.png').on('load', function() {

   $(this).remove(); // 防止內存泄露

   //圖片加載完畢

});

（3）、單張圖片（結合ES6 Promise）

//js

 new Promise((resolve, reject)=>{

    let pic = new Image()

    pic.src = '../03.png'

    pic.onload = function(){

       // 加載完成 

       resolve(pic)

    }

 }).then((pic)=>{

 //code

 })

（4）、多張圖片

var img = [],  

    flag = 0, 

    mulitImg = [

    '../01.png',

    '../02.png',

    '../03.png'

 ];

 var imgTotal = mulitImg.length;

 for(var i = 0 ; i < imgTotal ; i++){

    img[i] = new Image()

    img[i].src = mulitImg[i]

    var pic = img[i];

    //用jquery

    $(pic).on('load',function(){

    $(this).remove();

    flag++

    if(flag==imgTotal){

    //全部加載完成

    }

    })

    //原生js

    // img[i].onload = img[i].onreadystatechange = function(){

    //    if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){

    //        //第i張圖片加載完成

    //        flag++

    //        if( flag == imgTotal ){

    //           //全部加載完成

    //        }

    //    }

    // };

 }

（5）、多張圖片（結合ES6 Promise.all()）

let mulitImg = [

    '../01.png',

    '../02.png',

    '../03.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)=>{

     //全部加載完成

 })

如何判斷背景圖片加載完畢？

$('<img/>').attr('src', '../01.png').on('load', function() {

   $(this).remove(); // prevent memory leaks as @benweet suggested

   $('body').css('background-image', 'url(../01.png)');

});