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

使用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事件的一個狀態，值為loaded或complete的時候，表示已經加載完畢。

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

（2）、單張圖片（圖片動態生成）

//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)');

});