利用vue-lazyload实现懒加载
方法/步骤
1
安装vue-lazylad
2
查看安装是否成功1)查看node_modules中是否有上述安装的文件夹2)查看配置文件package.json中是否有上诉安装的名称及版本信息
3
在main.js中引入如图代码loading的图片是图片未加载时显示的图片
4
组件中测试img标签的src被替换成v-lazy
5
查看效果图一的图片为默认图片图二是滚动页面的一个瞬间,可以看到上面的图片被加载出来了,下面的还没有被加载而显示了预先设置的默认图片。
6
常用的一些vue-lazyload属性如下图