vue-lazyload使用

zeroyulong

于 2018-10-31 15:08:04 发布

阅读量500

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue2.x 文章标签： vue-lazyload

本文链接：https://blog.youkuaiyun.com/zeroyulong/article/details/83584386

vue2.x 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成并配置vue-lazyload插件，实现图片懒加载功能，包括安装、配置步骤及页面使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、集成vue-lazyload

npm install vue-lazyload

二、配置main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
	preLoad:1.3,
	error:require('./assets/error.png'),
	loading:require('./assets/loading.png'),
	attempt:1
})

三、需要使用的页面中使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>