vue-lazyload 是一个基于 Vue.js 的图片懒加载插件,可以实现在图片进入可视区域前不加载图片,减少网页的加载时间和带宽使用。
1.安装 vue-lazyload
npm install vue-lazyload --save
2.在main.js当中引入vue-lazyload,vue-lazyload 需要指定一个默认占位图,用于在图片未加载完成前展示给用户,可以配置全局默认的占位图。
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
error: require('./assets/loading.svg'),
loading: require('./assets/loading.svg'),
attempt: 1
}
)
3.在组件中使用 v-lazy 指令指定懒加载的图片地址
<template>
<div class="image-container">
<img v-lazy="imageUrl" alt="懒加载图片" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg',
};
},
};
</script>