Vue使用swiper轮播图懒加载注意事项
- 如果是经常替换的图片数据,最好不要使用swiper自带的lazy,因为会出现数据更新了,但是图片不能更新的情况。因为数据是绑定在data-src上的,但是页面显示的是src上的路径,不能重新加载。
- 使用vue-lazyload的时候注意在需要懒加载的图片上绑定
:key="src"
,这样就能很好的解决数据替换了,图片不能替换的问题。 - 在main.js中,使用全局加载图的时候,可以使用require(‘路径’)
- 当然在单独页面也可以添加不同的加载动画和error图。
使用vue-lazy做懒加载
安装
npm install vue-lazyload --save
,在main.js中引入
import VueLazyLoad from 'vue-lazyload' // 懒加载
Vue.use(VueLazyLoad,{
attempt: 1,
error: require('../src/assets/images/icon/error.gif'),
loading: require('../src/assets/images/icon/loading.gif')
})
使用
<img v-lazy="item" :key="item">
如果在页面中有不一样的加载图的话可以使用
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
<!-- 或者 -->
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
<img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
可以参考官网vue-lazy