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: 想棄坑，但沒有找到合適的替代品