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