vue图片懒加载插件vue-lazyload的使用（一）

最新推荐文章于 2025-06-17 13:25:40 发布

有一个王小森

最新推荐文章于 2025-06-17 13:25:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wangxiaoxiaosen/article/details/95485989

vue.js 专栏收录该内容

43 篇文章

订阅专栏

博客介绍了vue-lazyload插件的使用方法，包括通过npm下载插件，在main.js中引入插件，以及在组件里使用该插件，为vue项目使用懒加载提供了操作指引。

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

一：npm下载插件：

npm vue-lazyload -d

二、main.js引入：

import  vueLazyLoad from “vue-lazyload”;
Vue.use(vueLazyLoad, {
	preload:1.3,//加载高度比。
	loading:"../..jpg",//加载时的过渡图片
	error:"...jpg",//加载失败的图片
	attempt: 3//每次加载的张数。
	})

三、在组件中的使用；

单个图片加载：
将img的路径地址的属性:src改成v-lazy;
 <img v-lazy="../../static/1.jpg" alt=""> 

组合图片加载：
<div v-lazy-container="{ selector: 'img'}">
	<img :data-src="">
	<img :data-src="" >
</div>