判斷img圖片是否載入成功
上班之餘,記錄一下工作中遇到的有趣問題...
事情是這樣的...在做一個內嵌H5的app時,有一個“個人名片”頁面...要求:如果後臺介面有給頭像的圖片連結就用他們給的,如果沒給,前端給個預設頭像...測試過程中發現,介面的圖片連結有可能是無效的,就像這樣一個連結我們當時的做法是判斷avaterUrl(頭像連結欄位)是否存在,存在的情況下並不知道這張圖片是否有效...如果是無效圖片連結顯示出來的是,很明顯這樣很糟糕...
ios開發人員說:我們可以知道這張圖片是否載入失敗,失敗的話我們就替換成其他圖片...
當時我就想:前端能不能判斷圖片是否載入成功呢?於是就開始去了解img的載入...(博文只給我目前掌握的最推薦的做法,一些不靠譜的不討論...)
判斷img是否載入成功需要用到2個事件:和...但是什麼時候將圖片繫結事件呢?window.之後肯定不行,因為window.執行時圖片已載入完畢...而jquery的ready方法也行不通,因為可能img載入圖片失敗時,img並沒有繫結error事件,就會導致不能替換無效的圖片...有人可能會想到事件委託,但是這2個事件是不支援事件委託的...但是,換個思路,全域性繫結load或error事件,然後判斷事件物件是否為img,只對img做操作...
1、載入成功
// 圖片載入成功時觸發load事件,失敗不會觸發document.addEventListener("load", function (event) { var ev=event?event||window.event; var elem = ev.target; if (elem.tagName.toLowerCase() == 'img') { // 圖片載入成功 // do something... } }, true);
2、載入失敗
// 圖片載入成功時觸發error事件,成功不會觸發document.addEventListener("error", function (event) { var ev=event?event||window.event; var elem = ev.target; if (elem.tagName.toLowerCase() == 'img') { // 圖片載入失敗 --替換為預設 elem.src = "../img/default.jpg"; } }, true);
看似很完美的替換,But,如果你的預設圖片載入也失敗的話...所以還是要寫好alt屬性,提示使用者丟失的圖片內容...
參考連結:
關於圖片載入是否成功了討論告一段落...如有好的方案,歡迎留言評論...
原文出處:https://www.cnblogs.com/chenwenhao/p/9511866.html
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4289/viewspace-2812515/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- js如何判斷<img>圖片是否載入完畢JS
- js如何判斷img圖片是否載入完畢JS
- 如何判斷一個img圖片是否載入完畢
- jquery判斷<img>圖片是否載入完成程式碼例項jQuery
- javascript如何判斷一個圖片是否載入完成JavaScript
- javascript如何判斷一張圖片是否載入完成JavaScript
- js img圖片載入失敗,重新載入+斷網檢查JS
- 如何在低版本IE瀏覽器中實現判斷img圖片載入完畢瀏覽器
- python如何判斷圖片是否為空Python
- JavaScript判斷iframe是否載入完畢JavaScript
- Linux驅動模組載入方法和如何判斷Linux驅動是否載入成功Linux
- 正則判斷MIME 型別是否是圖片型別
- PHP判斷檔案是否為圖片的方法PHP
- 相容IE瀏覽器的判斷img圖片尺寸的程式碼瀏覽器
- 怎樣判斷mysql是否安裝成功MySql
- 如何判斷js檔案是否載入完畢JS
- java裡如何判斷Email是否傳送成功?JavaAI
- js如何判斷頁面是否已經載入完成JS
- jquery如何判斷js檔案是否載入完畢jQueryJS
- js判斷引入的js檔案是否載入完畢JS
- 如何判斷我的網站是否成功安裝SSL網站
- iOS 常用圖片格式判斷 (Swift)iOSSwift
- Linux判斷上一個語句是否執行成功Linux
- Android判斷企業微信是否登入:Android
- JavaScript判斷是否是手機mobile登入JavaScript
- canvas代替img渲染圖片Canvas
- 前端如何通過連結去下載img圖片前端
- java判斷輸入的字串是否為數字Java字串
- ASP.NET判斷是否為手機登入ASP.NET
- 判斷字串是否為空字串
- 判斷URL字串是否合法字串
- 41:判斷元素是否存在
- 判斷oracle是否啟動Oracle
- Javascript 判斷物件是否相等JavaScript物件
- 判斷SD卡是否可用SD卡
- 判斷字串是否唯一字串
- 超智慧vue圖片懶載入之指令化管理(vue-img-lazy-load)Vue
- Flutter 圖片載入Flutter