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="......"/>
总结: 看是不是很简单
您可能感兴趣的文章:
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论