vue-cli项目中引入图片懒加载

Posted 2022-11-29 webwangjie

1、全局安装vue-lazyload

npm install vue-lazyload -g

 

2、在main.js配置文件引入

import VueLazyload from ‘vue-lazyload‘

 Vue.use(VueLazyload, 
   //预加载高度
   preLoad: 1.3,
   //错误时显示的图片
   error: ‘/static/about111.jpg‘,
   //图片加载中显示的图片
   loading: ‘/static/img/loading.gif‘,
   //尝试加载次数
   attempt: 1
 )

　

3、在组件中使用时，将img标签的src换成v-lazy：

　　未使用懒加载前的代码：

<li><img class="g-img1"src="/static/1.jpg" ></li>

　　使用懒加载后的代码：

<li><img class="g-img1" v-lazy="‘/static/1.jpg‘" ></li>

 

4、在不同的页面中显示不同的加载占位图的写法

<img v-lazy="src: item.imgUrl, loading: ‘http://www.xxx.com/loading.png‘"  />

　　

5、背景图使用懒加载的写法

v-lazy:background-image="src: item.imgUrl, error: ‘http://www.xxx.com/error.png‘, loading: ‘http://www.xxx.com/loading.png‘"