在實際的運用中有這樣一種場景，某資源載入完成後再執行某個操作，例如在做匯出時，後端透過開啟模板頁生成PDF，並返回下載地址。這時前後端通常需要約定一個flag，用以標識模板準備就緒，可以生成PDF了。
試想，如果模板中有圖片，此時如何判斷圖片是否載入完成？
在此之前來了解一下jquery的ready與window.onload的區別，ready只是dom結構載入完畢，便視為載入完成。(此時圖片沒有載入完畢)，onload是指dom的生成和資源完全載入（比如flash、圖片）出來後才執行。接下來回到正題，先從單張圖片說起。
（1）、單張圖片（圖片在文件中）
// HTML<img src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg"> //js $(document).ready(function(){ //jquery $("#xiu").load(function(){ // 載入完成 }); //原生 onload var xiu = document.getElementById("xiu") xiu.onload = xiu.onreadystatechange = function(){ if(!this.readyState||this.readyState=="loaded"||this.readyState=="complete"){ // 載入完成 } };})
注：1、IE8及以下版本不支援onload事件，但支援onreadystatechange事件；2、readyState是onreadystatechange事件的一個狀態，值為loaded或complete的時候，表示已經載入完畢。3、以下內容省略相容
（2）、單張圖片（圖片動態生成）
//js var xiu = new Image() xiu.src = "http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg" xiu.onload = function(){ // 載入完成 }
（3）、單張圖片（結合ES6 Promise）
//js new Promise((resolve, reject)=>{ let xiu = new Image() xiu.src = "http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg" xiu.onload = function(){ // 載入完成 resolve(xiu) } }).then((xiu)=>{ //code })
（4）、多張圖片
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張圖片載入完成 flag++ if( flag == imgTotal ){ //全部載入完成 } } }
（5）、多張圖片（結合ES6 Promise.all()）
let 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" ]; 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)=>{ //全部載入完成 })
在實際的運用中有這樣一種場景，某資源載入完成後再執行某個操作，例如在做匯出時，後端透過開啟模板頁生成PDF，並返回下載地址。這時前後端通常需要約定一個flag，用以標識模板準備就緒，可以生成PDF了。
試想，如果模板中有圖片，此時如何判斷圖片是否載入完成？
在此之前來了解一下jquery的ready與window.onload的區別，ready只是dom結構載入完畢，便視為載入完成。(此時圖片沒有載入完畢)，onload是指dom的生成和資源完全載入（比如flash、圖片）出來後才執行。接下來回到正題，先從單張圖片說起。
（1）、單張圖片（圖片在文件中）
// HTML<img src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg"> //js $(document).ready(function(){ //jquery $("#xiu").load(function(){ // 載入完成 }); //原生 onload var xiu = document.getElementById("xiu") xiu.onload = xiu.onreadystatechange = function(){ if(!this.readyState||this.readyState=="loaded"||this.readyState=="complete"){ // 載入完成 } };})
注：1、IE8及以下版本不支援onload事件，但支援onreadystatechange事件；2、readyState是onreadystatechange事件的一個狀態，值為loaded或complete的時候，表示已經載入完畢。3、以下內容省略相容
（2）、單張圖片（圖片動態生成）
//js var xiu = new Image() xiu.src = "http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg" xiu.onload = function(){ // 載入完成 }
（3）、單張圖片（結合ES6 Promise）
//js new Promise((resolve, reject)=>{ let xiu = new Image() xiu.src = "http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg" xiu.onload = function(){ // 載入完成 resolve(xiu) } }).then((xiu)=>{ //code })
（4）、多張圖片
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張圖片載入完成 flag++ if( flag == imgTotal ){ //全部載入完成 } } }
（5）、多張圖片（結合ES6 Promise.all()）
let 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" ]; 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)=>{ //全部載入完成 })