問題描述

網(wǎng)站當中經(jīng)常會遇到圖片加載失敗的問題，img中有地址，但是地址打開是錯誤的。情況如下：

不同瀏覽器處理錯誤圖片是不一樣的，有的干脆就顯示差號，例如IE，有的顯示一張破碎的圖片，有的則是給一張高度比較大的默認圖，例如PC端的火狐，IOS中Safari,還有安卓中的UC瀏覽器。這樣在手機中就會導致左右兩側圖片高度不一致！如下圖：

解決方案

其實這里解決很簡單，判斷當圖片加載失敗的時候給一個默認圖就可以了，不讓瀏覽器使用其自帶的默認圖。

<img src="img/noimage2.png" onerror="javascript:this.src='img/noimage2.png';" alt="pic" />

衍生問題

因為圖片加載失敗進入默認圖，那么默認圖再加載失敗怎么辦呢？這不是進入一個死循環(huán)嗎？

最簡單的一個解決辦法是，onerror中的圖保證能打開，保證比較?。〔粫霈F(xiàn)問題！。這個方法也是最有效的方法！

假如你不能保證，那么，只能靠函數(shù)來解決這個問題了！

思路是：

當圖片加載失敗，進入onerror的時候，判斷onerror的圖片是不是能加載，在onerror中的圖片觸發(fā)onerror的時候，設置onerror為null。

代碼如下：