顯示一張圖片揩魂,通過訪問圖片的地址版保,如果地址正確就顯示地址正確的圖片摇幻,如果不正確就顯示默認的地址,說是通過JavaScript判斷漱竖,實際只需要一個img標(biāo)簽就可以了
這里需要了解一下img標(biāo)簽中的onError 禽篱,onAbort,onALoad事件
onError:當(dāng)圖片加載出現(xiàn)錯誤馍惹,會觸發(fā) 經(jīng)常在這里事件里頭寫入 將圖片導(dǎo)向默認報錯圖片躺率,以免頁面上出現(xiàn)紅色的叉叉
onLoad:事件是當(dāng)圖片加載完成之后觸發(fā)
onAbort:圖片加載的時候,用戶通過點擊停止加載(瀏覽器上的紅色叉叉)時出發(fā)万矾,通常在這里觸發(fā)一個提示:“圖片正在加載”
例如:當(dāng)一個圖片顯示失敗之后需要連接另一個圖片的時候可以這樣寫
<img src="http://avatar.csdn.net/1/2/F/3_clp880710.jpg" style="width: 200px;height: 100px"
onerror="javascript:this.src='http://www.baidu.com/img/bdlogo.gif'" />
把上面正確的地址改成錯誤的地址時就會加載百度的圖片
例如悼吱,你可能會利用這個onAbort消息來警告用戶,提醒他們停止某個重要圖像的加載良狈,例如圖像映射:
<img src="pics/camnpr.gif" usemap="#map1" onAbort="window.alert('注意:這張照片含有重要的鏈接,請重新載入.')">
同時有另一個問題出現(xiàn):如果onerror="this.src='圖片'"
后添,這個"圖片"也不存在時,就會出現(xiàn)下邊的錯誤:
img圖片沒找到onerror事件 Stack overflow at line: 0
IE下打開網(wǎng)頁時薪丁,會彈出“Stack overflow at line: 0”的彈框遇西。經(jīng)分析,這個bug是由于img標(biāo)簽的onerror事件引起的严嗜。程序中用到的代碼片段如下:正常情況下顯示src所指路徑的圖片粱檀,加載失敗時顯示通過img標(biāo)簽的onerror事件顯示另一張圖片,問題就出現(xiàn)在了這里漫玄,當(dāng)另一張圖片也不存在時茄蚯,就造成了循環(huán)觸發(fā)onerror事件,在IE下就會彈出“stack overflow”的彈框睦优。
解決的方法也很簡單渗常,在重新給img的src屬性賦值時,先將onerror事件清除掉汗盘,再賦值皱碘,這樣就不存在循環(huán)調(diào)用的問題了,代碼段如下:
<img src="http://avatar.csdnnet/1/2/F/3_clp880710.jpg" style="width: 200px;height: 100px"
onerror="this.onerror='';this.src='http://www.baidu.com/img/bdlogo.gif'" />
當(dāng)時竟然做成在后臺判斷圖片是否存在隐孽,這樣考慮的就要有防火墻的問題了癌椿,所以能在客戶端解決的就在客戶端解決家凯。盡量不要依賴在服務(wù)端