這天氣實在太燥熱了，還好裝了空調，總算能靜下來分享點干貨。頁面在加載圖片的時候，有時候會出現“因圖片錯誤未顯示“或者“還在預加載ing”，我們常會用到默認圖片來替代，避免頁面上出現空白或者紅叉的情況，看到下面的圖，你能直視嗎？

如何實現這樣的效果呢，方法如下：

利用javascript中 image 對象的 onerror 事件來判斷，出錯則更換image對象的src為默認圖片的 URL。

JavaScript onerror 事件

使用 onerror 事件是一種老式的標準的在網頁中捕獲javascript錯誤的方法。

只要頁面中出現腳本錯誤，就會產生 onerror 事件。如果需要利用 onerror 事件，就必須創建一個處理錯誤的函數。你可以把這個函數叫作

onerror 事件處理器 (onerror event

handler)。這個事件處理器使用三個參數來調用：msg(錯誤消息)、url(發生錯誤的頁面的 url)、line(發生錯誤的代碼行)。οnerrοr=handleErrfunction?handleErr(msg,url,l)

{

//Handle?the?error?here

return?true?or?false

}

瀏覽器是否顯示標準的錯誤消息，取決于 onerror 的返回值。如果返回值為 false，則在控制臺 (javascript console) 中顯示錯誤消息。反之則不會。

下面的例子展示如何使用 onerror 事件來捕獲錯誤：

οnerrοr=handleErr

var?txt=""

function?handleErr(msg,url,l)

{

txt="There?was?an?error?on?this?page.nn"

txt+="Error:?"?+?msg?+?"n"

txt+="URL:?"?+?url?+?"n"

txt+="Line:?"?+?l?+?"nn"

txt+="Click?OK?to?continue.nn"

alert(txt)

return?true

}

function?message()

{

adddlert("Welcome?guest!")

}

總結

方法不止一種，但是這種方法比較實用，您有其他好的方法，可以留言分享給我們。

總結

以上是生活随笔為你收集整理的html图片慢慢消失的事件,[Web前端]用javascript实现默认图片替代未显示的图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。