JavaScript判斷圖片是否需要顯示默認圖片

顯示一張圖片揩魂,通過訪問圖片的地址版保,如果地址正確就顯示地址正確的圖片摇幻,如果不正確就顯示默認的地址,說是通過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ù)端

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市如失,隨后出現(xiàn)的幾起案子绊诲,更是在濱河造成了極大的恐慌,老刑警劉巖褪贵,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掂之,死亡現(xiàn)場離奇詭異,居然都是意外死亡脆丁,警方通過查閱死者的電腦和手機世舰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來槽卫,“玉大人跟压,你說我怎么就攤上這事〖吲啵” “怎么了震蒋?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長躲庄。 經(jīng)常有香客問我查剖,道長,這世上最難降的妖魔是什么噪窘? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任笋庄,我火速辦了婚禮,結(jié)果婚禮上倔监,老公的妹妹穿的比我還像新娘直砂。我一直安慰自己,他們只是感情好浩习,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布静暂。 她就那樣靜靜地躺著,像睡著了一般瘦锹。 火紅的嫁衣襯著肌膚如雪籍嘹。 梳的紋絲不亂的頭發(fā)上闪盔,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天弯院,我揣著相機與錄音,去河邊找鬼泪掀。 笑死听绳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的异赫。 我是一名探鬼主播椅挣,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼头岔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鼠证?” 一聲冷哼從身側(cè)響起峡竣,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎量九,沒想到半個月后适掰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡荠列,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年类浪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肌似。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡费就,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出川队,到底是詐尸還是另有隱情力细,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布固额,位于F島的核電站艳汽,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏对雪。R本人自食惡果不足惜河狐,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瑟捣。 院中可真熱鬧馋艺,春花似錦、人聲如沸迈套。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽桑李。三九已至踱蛀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間贵白,已是汗流浹背率拒。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留禁荒,地道東北人猬膨。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像呛伴,于是被迫代替她去往敵國和親勃痴。 傳聞我的和親對象是個殘疾皇子谒所,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,728評論 1 92
  • < img> 標(biāo)簽是頁面上最為重要的元素之一沛申。很難想象一個頁面上沒有圖片的樣子劣领,這樣的頁面效果將會大打折扣。 任何...
    壯哉我大前端閱讀 5,469評論 1 9
  • JS通過onerror判斷圖片是否存在铁材,如果不存在剖踊,則替換為指定的默認圖片 情景分析:有時,img標(biāo)簽中的src圖...
    他大舅啊閱讀 3,703評論 0 1
  • HTML標(biāo)簽解釋大全 一衫贬、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,225評論 1 41
  • 其實很多時候都很茫然德澈,花很多時間去發(fā)呆。仔細思考一些根本不會發(fā)生的問題固惯,所有的時間變得無法言明的有意義梆造。 ...
    南道海無風(fēng)閱讀 198評論 2 0