vue-lazyload: 想弃坑,但没有找到合适的替代品
程序员文章站
2022-05-03 11:52:55
vue lazyload,相信在vue项目中大家都有用到过它,同时也遇到过大大小小的坑。笔者也遇到过这样一个bug,在一个图片列表页面中,总有一定的概率图片的状态为load,导致图片一直加载中。。。这个bug,到现在的版本还没有解决,晕(((φ(◎ロ◎;)φ)))。于是打算弃坑,寻找新的插件代替。。 ......
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="......"/>
总结: 看是不是很简单