vue-lazyload: 想棄坑,但沒有找到合適的替代品
阿新 • • 發佈:2019-05-07
中大 只需要 頁面 狀態 是不是 binding 通過 業務 update
vue-lazyload,相信在vue項目中大家都有用到過它,同時也遇到過大大小小的坑。筆者也遇到過這樣一個bug,在一個圖片列表頁面中,總有一定的概率圖片的狀態為load,導致圖片一直加載中。。。這個bug,到現在的版本還沒有解決,暈(((φ(◎ロ◎;)φ)))。於是打算棄坑,尋找新的插件代替。。。可惜沒找到,那現在只能等官方下個版本修復問題嘍?
後來冷靜想了一下,或許有個曲線救國的方法!
其實我覺得現在的業務需求中,圖片的需求量不大,或許不用懶加載影響不太,反正圖片列表可以通過分頁來分批加載
那麽事情就好辦了,現在只需要一個加載失敗顯示默認圖片的功能就ok了
代碼如下:
// 註冊一個全局自定義指令 `v-load` Vue.directive('load', { // 當被綁定的元素插入到 DOM 中時…… inserted: function(el,binding){ setImg(el,binding); }, update: function(el,binding){ setImg(el,binding); } }); function setImg(el,binding){ var loadImg = '自定義的base64加載中圖片'; var errorImg = '自定義的base64加載失敗圖片'; el.src = loadImg; //默認加載圖片 if(!binding.value){ el.src = errorImg }else{ var img = new Image(); img.src = binding.value; img.onload = function(){ el.src = binding.value; img = img.onload = null; } img.onerror = function(){ el.src = errorImg; img = img.onerror = null; } } }
調用
<img v-load="......"/>
總結: 看是不是很簡單 ?? ,就是沒有了懶加載的功能而已, 如果你的業務需求對圖片要求量不大, 可以考慮筆者的方法. 如果圖片量很大,建議分頁,或者等vue-lazyload更新修復. ??
vue-lazyload: 想棄坑,但沒有找到合適的替代品