為什麼影像的「onerror」屬性在 Chrome 和 Mozilla 中表現不同？

使用 Onerror 屬性解決圖片載入問題

在 Web 開發中，我們經常會遇到由於連結中斷或伺服器錯誤而導致圖片載入失敗的情況。 img 元素的 onerror 屬性允許我們透過指定要顯示的替代圖像來處理這種情況。然而，用戶報告其功能在不同瀏覽器中不一致，特別是在 Chrome 和 Mozilla 中。

為了說明問題，讓我們考慮以下程式碼片段：

<code class="html"><img src="invalid_image.jpg" onerror="this.src='alternate_image.jpg';"></code>

此程式碼嘗試從無效來源載入圖片。如果映像載入失敗，則應觸發 onerror 處理程序，以指定的備用映像取代損壞的映像。然而，使用者發現這種方法在 Internet Explorer 以外的瀏覽器中不起作用。

這種行為的根本原因是瀏覽器對 onerror 事件的處理方式不同。如果備用圖片載入失敗，某些瀏覽器（例如​​ Chrome 和 Mozilla）將多次觸發該事件，從而導致無限循環。為了防止這種情況，我們需要在第一次嘗試後使用以下修改後的程式碼使onerror 處理程序無效：

<code class="html"><img src="invalid_image.jpg" onerror="this.onerror=null;this.src='alternate_image.jpg';"></code>

透過使onerror 處理程序無效，我們確保事件只會觸發一次，從而防止無限循環。此方法在多種瀏覽器中一致有效，包括 Chrome、Mozilla 和 Internet Explorer。

以上是為什麼影像的「onerror」屬性在 Chrome 和 Mozilla 中表現不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！