• 400-123-4567

    工作时间

    周一至周五:9:00-21:00

    周末及节日:9:00-18:00

  • 手機版二維碼

    隨時手機查資源

  • 掃描二維碼

    加入官方微信群

Meomii 管理員
  • 未知地域
  • 461發帖數
  • 460主題數
  • 0關注數
  • 0粉絲

[HTML] img圖片不存在時設置默認圖片

[複製鏈接]
Meomii 發表於 2019-11-11 01:28:18 | 顯示全部樓層 |閱讀模式 打印 上一主題 下一主題
例如,有以下代碼:
  1. < img src = "圖片的url地址" alt = "圖片XX" />   
複製代碼
當在頁面顯示的時候,萬一圖片被移動了位置或者丟失的話,將會在頁面顯示一個帶X的圖片,很是影響用戶的體驗。即使使用alt屬性給出了"圖片XX"的提示信息,也起不了多大作用。其實,可以這樣處理:當圖片不存在的時候,會觸發onerror事件,我們可以在該事件中做一下補救的工作,比如:

1、讓這個圖片元素隱藏
  1. < img src = "圖片的url地址" alt = "圖片XX" onerror = "this.style.display='none'" />
複製代碼

2、用默認的圖片替換
  1. < img src = "圖片的url地址" alt = "圖片XX" onerror = "this.src='默認圖片的url地址'" />
複製代碼
注意:如果使用不當,在IE內核的瀏覽器下會造成死循環。比如:當【默認圖片的url地址】也加載不成功(比如網速比較慢的時候)或不存在的話,就會反复的加載,最後造成堆棧溢出錯誤。 因此,需要用下面兩種方法解決: a、更改onerror代碼為其它處理方式或者確保onerror中的默認圖片足夠小,並且存在。 b、控制onerror事件只觸發一次,需要增加這句話:this.οnerrοr=null;增加後如下:
  1. < img src = "圖片的url地址" alt = "圖片XX" onerror = "this.src='默認圖片的url地址;this.οnerrοr=null'" />
複製代碼
經測試,上面的方法在IE各個版本及谷歌、火狐瀏覽器中都支持。

以上方法適合<img>較少的情況,如果要處理的<img>比較多的話,可以做一個全局性的設置:
可以寫一個js腳本,讓其遍歷頁面所有的<img>標籤,給每個標籤添加error事件,當任何地方的圖片不存在時都可以進行統一的處理。
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊 Sign in with facebook

本版積分規則

猜你喜歡
全国统一客服电话
400-1234-7788

24x7小时免费咨询

  • 官方在线客服

    QQ客服:小西

    点击交谈

    QQ客服:良子

    点击交谈

    QQ客服:闵月

    点击交谈
  • 上海市虹口区海伦中心B座4F4055-4056室

  • 手機掃碼查看手機版

    手機查找資源更方便

  • 扫一扫关注官方微信

    加入官方微信群

Powered by Meomii