圖片載入判斷以及圖片替代功能

發表於 更新於 分類於 Disqus：
製作網頁時圖片一直是不可少的元素，不過有時我們使用的圖片會因為圖庫網站掛掉、CORS、網址填錯 等等因素導致圖片無法正確顯示，而原生的 JavaScript 其實就有辦法做到，圖片如果無法正確顯示那麼使用替換圖片的功能。

前言

製作網頁時圖片一直是不可少的元素，不過有時我們使用的圖片會因為圖庫網站掛掉、CORS、網址填錯 等等因素導致圖片無法正確顯示，而原生的 JavaScript 其實就有辦法做到，圖片如果無法正確顯示那麼使用替換圖片的功能。

Image

上述的圖片檢查並替換的功能，其中的核心就是 new Image() 這個作法其實時就是讓 JavaScript 動態產生一個圖片元素，而 MDN 文件 說明更為直接，直接指出

1
2
3
var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

上面程式碼，其實就等同於下面 img HTML 的寫法。

1
<img width="100" height="200" src="picture.jpg">

而最重要的是 new Image() 這個功能，還可以透過 complete 這個屬性來檢查圖片是否載入完成，這邊可以直接看範例：

上面範例中有五張圖片，前面四張都是能夠正確顯示（貓貓），最後一張刻意將網址打錯，經由 image.complete 判斷，因為圖片無法載入，變使用預設圖片（可愛的狗勾）來將無法顯示的圖片作替換，上述範例是針對 img 標籤圖片作替換的，那麼想替換 background-image 中的圖片是否有辦法？
結果當然是有辦法的，實際作法和上面雷同，不過會使用 split() 方法將圖片網址取出，再使用 complete 判斷，比如以下範例

值得一提的是上面範例中有使用到 image.onload 這個方法，這個方法是在圖片正確載入後會被執行，以上面範例來說確實可以不用添加，但如果有需要對正確載入的圖片做一些事，則可以使用到這個方法。

參考文獻