多语言展示
当前在线:1667今日阅读:176今日分享:34

如何利用vue-lazyload实现懒加载

利用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属性如下图

推荐信息