vue-lazyload: 想棄坑，但沒有找到合適的替代品

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更新修復. 😁