如何在所有瀏覽器中使用 onerror 屬性處理映像載入錯誤？

使用 onerror 屬性處理映像載入錯誤

將映像合併到 Web 應用程式中通常需要處理潛在的載入失敗。 onerror 屬性提供了一個方便的解決方案來優雅地處理此類錯誤。

Background

如給定的 HTML 程式碼中所述，onerror 屬性設定當圖片載入程序遇到錯誤時執行腳本的事件偵聽器。但是，如查詢中所提到的，這種方法在某些瀏覽器（例如​​ Chrome 和 Mozilla）中可能會失敗。

解決方案

為了確保跨瀏覽器的相容性，請考慮使用以下內容語法：

<code class="html"><img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"></code>

如果主映像載入失敗，此程式碼將提供備用後備圖像。為了防止備份 URL 也無效時出現無限循環，程式碼使用「this.onerror=null;」來使錯誤處理程序無效。

現場示範

An以下連結提供了此解決方案的互動式示範：

• http://jsfiddle.net/ oLqfxjoz/

其他注意事項

如解決方案中所述，使用此方法可確保Chrome 和Mozilla 中的相容性。不過，需要注意的是，不同瀏覽器環境對圖片載入錯誤的處理可能會有所不同。

以上是如何在所有瀏覽器中使用 onerror 屬性處理映像載入錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！