阅读 68

Vue项目优化: 使用vue-lazyload插件实现图片懒加载

vue-lazyload

vue-lazyload插件用于 vue 项目中图片的懒加载 npm地址:www.npmjs.com/package/vue…

vue-lazyload安装

通过npm安装

npm install vue-lazyload --save-dev

通过CDN引入使用

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
复制代码

vue-lazyload使用

main.js
//引入vue-lazyload
import VueLazyload from 'vue-lazyload'
//使用vue-lazyload
Vue.use(VueLazyload, {
	//图片加载失败时显示的图片
	error: require('./assets/img/error.jpg'), 
	//图片正在加载时显示的图片
  	loading: require('./assets/img/loading.jpg')
})
复制代码

配置参数: 在这里插入图片描述

在需要的组件中使用

将需要懒加载图片的:src属性换成v-lazy

<div v-for="(item, index) in imgList" :key='index'>
  <img v-lazy="item.src">
</div>
复制代码

如果是本地相对路径图片,要使用require()引入图片

<img v-lazy="require('../../assets/img/banner.jpg')">
复制代码

需要懒加载的背景图片

<div v-lazy:background-image="require('../../assets/img/bg.jpg')"></div>
复制代码
文章分类
前端
文章标签