最近有一個在頁面中的圖片加載完成后執(zhí)行某些操作的需求摹菠，那么應(yīng)該如何判斷頁面中的圖片是否加載完成呢？
圖片加載事件
圖片的加載分為兩種情況：
動態(tài)加載（JS生成）
非動態(tài)加載（html生成）
非動態(tài)加載
對于非動態(tài)加載的圖片铐懊，直接使用window.onload，在網(wǎng)頁中所有內(nèi)容加載完畢后執(zhí)行操作即可远荠。
在jquery中還有一個$(document).ready() 方法胚鸯，簡要介紹一下二者的區(qū)別旁涤。
| 事件屬性 | window.onload | $(document).ready() |
|---|---|---|
| 執(zhí)行時機 | 必須等待網(wǎng)頁中所有的內(nèi)容加載完畢后（包括圖片） | 網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行碉咆，可能DOM元素關(guān)聯(lián)的東西并沒有加載完 |
| 編寫個數(shù) | 不能同時編寫多個伙菊，后面綁定的事件會覆蓋前面的 | 能同時編寫多個 |
| 簡化寫法 | 無 | $(function() { //... }) |
| 其他 | 原生方法败玉，jquery中可寫作$(window).load | jquery方法 |
注：IE8及以下不支持onload事件，但支持onreadystatechange事件镜硕，有兼容性需要的可以使用該方法运翼，這里就不展開了。
動態(tài)加載
對于動態(tài)加載的圖片兴枯，可以使用img標(biāo)簽的onload事件血淌，原生實現(xiàn)如下：
var img = new Image()
img.onload = function() {
//...
}
img.src = 'xxx.jpg'
這里注意圖片的src要寫在onload事件之后，如果先賦值src财剖，瀏覽器會去異步加載src中的值悠夯，這個異步過程可能在onload之前就完成了，例如圖片緩存躺坟、js阻塞沦补、圖片很小等等原因，那么onload事件將不會執(zhí)行咪橙。將src寫在onload之后策彤，可以保證異步過程在onload賦值完成后才開始進行栓袖，保證能夠正確監(jiān)聽到onload事件。
jquery實現(xiàn):
$('<img/>').on('load', function() {
$(this).remove();
//...
}).attr('src', 'xxx.jpg');
在onload事件中使用$(this)來對生成的img進行操作店诗。
ES6實現(xiàn)：
new Promise((resolve, reject) => {
let img = new Image()
img.onload = function(){
resolve(img)
}
img.src = 'xxx.jpg'
}).then((img) => {
//...
})
多張圖片ES6實現(xiàn)：
let images = [
'xxx1.jpg',
'xxx2.jpg',
'xxx3.jpg'
];
let promises = [],
img = [],
imgCount = images.length;
for(let i = 0 ; i < imgCount ; i++){
promises[i] = new Promise((resolve, reject)=>{
img[i] = new Image()
img[i].onload = function(){
resolve(img[i])
}
img[i].src = images[i]
})
}
Promise.all(promises).then((img)=>{
//...
})
利用Promise.all在所有圖片都加載完成時執(zhí)行相應(yīng)操作。
鏈接失效
一個站點可能會有很多圖片音榜，假如某個圖片鏈接失效了庞瘸，那么上面代碼中的Promise.all也就無法成功執(zhí)行，如何避免這種情況呢赠叼？
可以利用onerror事件來設(shè)置鏈接失效時執(zhí)行的操作擦囊，例如隱藏圖片或者重新設(shè)置一個圖片：
$('img').on('error', function() {
//設(shè)置提示錯誤的圖片
$(this).attr('src', 'error.jpg')
})
假如這個新設(shè)置的圖片鏈接也失效了，那么瀏覽器將會對同一個錯誤鏈接一直發(fā)送請求嘴办，陷入死循環(huán)瞬场，可以改用one來綁定error事件，這樣error事件對于該img元素只會運行一次涧郊，不會陷入死循環(huán)贯被。
