JS判斷單、多張圖片加載完成

在實(shí)際的運(yùn)用中有這樣一種場(chǎng)景，某資源加載完成后再執(zhí)行某個(gè)操作，例如在做導(dǎo)出時(shí)，后端通過打開模板頁(yè)生成PDF，并返回下載地址。這時(shí)前后端通常需要約定一個(gè)flag，用以標(biāo)識(shí)模板準(zhǔn)備就緒，可以生成PDF了。

試想，如果模板中有圖片，此時(shí)如何判斷圖片是否加載完成？

在此之前來了解一下jquery的ready與window.onload的區(qū)別，ready只是dom結(jié)構(gòu)加載完畢，便視為加載完成。(此時(shí)圖片沒有加載完畢)，onload是指dom的生成和資源完全加載（比如flash、圖片）出來后才執(zhí)行。接下來回到正題，先從單張圖片說起。

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

// HTML <img id='xiu' 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事件的一個(gè)狀態(tài)，值為loaded或complete的時(shí)候，表示已經(jīng)加載完畢。 3、以下內(nèi)容省略兼容

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

//js var xiu = new Image() xiu.src = 'http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg' xiu.onload = function(){ // 加載完成 } （3）、單張圖片（結(jié)合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）、多張圖片（結(jié)合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)=>{ //全部加載完成 })