仅支持 Vue2,不支持 Vue3
安装依赖包
npm i vue-lazyload -S
在 main.js 使用插件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3, // 预加载高度的比例
error: require('./assets/error.gif'),
loading: require('./assets/loading.gif'),
attempt: 2, // 尝试次数
})
在组件中使用
<template>
<div>
<!-- 懒加载图片 -->
<ul>
<li v-for="item in imgList" :key="item">
<img v-lazy="item" alt="" />
</li>
</ul>
<!-- 懒加载背景 -->
<ul>
<li v-for="item in imgList" :key="item" v-lazy:background-image="item"></li>
</ul>
</div>
</template>
export default {
data() {
return {
imgList: [
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
'https://xxx/assets/img/1.jpg',
]
};
},
};
</script>