載入失敗圖片的處理方法

一、載入失敗圖片原因

當我們瀏覽網頁時，有時會出現一些圖片無法載入的情況。這些圖片可能是因為以下原因未能被載入成功：

1、網路問題：用戶網路問題，無法連接到伺服器上的資源文件。此時需確保用戶網路問題是否解決。

2、文件不存在：文件上傳或鏈接失效，如文件名稱修改後未更新鏈接或文件被刪改等。此時需檢查鏈接或者文件是否存在。

3、網路延遲：資源文件較大或伺服器響應速度較慢。此時需等待網路延遲結束。

無論是哪種原因導致的圖片無法載入成功，我們都可以通過下面的方式進行處理。

二、默認圖片處理方法

我們一般可以在網頁上放置一個默認圖片，當圖片無法載入成功時，直接展示默認圖片。這種方式對於用戶體驗不太友好，但是它可以避免用戶看到一片空白。

  <img src="xxx.png" onerror="this.onerror=null;this.src='default.png'"/>

以上代碼就是設置了一個錯誤處理事件，當載入失敗時將會使用默認圖片”default.png”，即圖片路徑為”xxx.png”。

三、JS處理方法

我們可以通過JS的方法對圖片進行處理，使其顯示一個錯誤圖片，或者顯示一些有用的調試信息。

  //JS實現
  var img = document.getElementById("myImg");
  img.addEventListener("error", function () {
    this.src = "error.png";
    this.onerror = null;
  }, false);

以上代碼通過監聽錯誤事件，當載入失敗時將會將當前圖片換成一個錯誤的圖片”error.png”，並且避免重複載入。

四、防止重複請求

有些圖片，比如廣告、頭像等，可能會在同一個頁面中被多次引用。如果某個圖片無法載入，所有對應的圖片都會失敗。此時可以使用緩存的方式避免重複請求。

  img.onerror = function() {
    if (!this.getAttribute('data-is-retry')) {
      this.setAttribute('data-is-retry', 1);
      this.src = this.src;
    } else {
      this.onerror = null;
    }
  }

以上代碼通過給圖片標記一個是否重試屬性，當圖片重試次數超過某個閾值時就停止重試請求。

五、圖片懶載入

在網頁的圖片數量過多時，可以使用圖片懶載入技術。該技術可以在用戶滾動頁面後，才載入接下來的圖片，從而減少頁面的載入時間。

  //jQuery實現
  $("img.lazy").lazyload({
    threshold: 200,
    placeholder: "placeholder.png",
    effect: "fadeIn"
  });

以上代碼是使用jQuery的插件lazyload實現圖片懶載入。當圖片滾動到頁面距離底部200像素時，才開始載入，並在沒有載入完成時顯示佔位符圖片”placeholder.png”，在載入完成時實現一個淡入的效果。

六、結論

無論是使用默認圖片、JS處理方法還是懶載入技術，都可以很好地幫助我們解決圖片載入失敗的問題。對於不同的應用場景，我們可以根據具體的需求進行選擇。