在vue.js与h5混合开发中使用图片懒加载vue-lazyload.js插件详细使用步骤

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

努力学习的萌新

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

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue-lazyload vue 图片懒加载 vue 背景图片懒加载

本文链接：https://blog.youkuaiyun.com/qq_33464680/article/details/90665645

vue 专栏收录该内容

2 篇文章

订阅专栏

博主在使用vue.min.js与h5混合开发时用到vue-lazyload.js，因脚手架教程多，故整理其在vue混合开发的用法，包括通过cdn或下载到本地、初始化、在html中使用及完整使用步骤。

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

最近没有使用vue-cli 而是使用的vue.min.js 与h5混合开发中用到了vue-lazyload.js 查询了大量的资料但是发现都是脚手架的教程比较多所以稍微整理一下 vue混合开发的用法
1.cdn 或者将vue-lazyload.js 下载到本地

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
或者
<script src="./js/vue-lazyload.js"></script>

2.另起一个<script>标签里面初始化vue-lazyload.js

<script type="text/javascript">
	Vue.use(VueLazyload, {
	 	preLoad: 1.3,
	 	error: '自己的error.png',
	 	loading: '自己的loading',
	 	attempt: 1
	})
</script>

3.html使用

img
<img v-lazy="item.imgUrl" v-for="(item,index) in List">
背景图片
<div class="contopImg" v-for="(item,index) in List" v-lazy:background-image="item.imgUrl" :key="index></div>

4.完整使用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
</head> 
<body>
    <div id="app">
        <!--图片-->
        <img v-for="(item,index) in List" v-lazy="item.imgUrl" :key="index/>
        <!--背景图片-->
        <div  v-for="(item,index) in List" v-lazy:background-image="item.imgUrl" :key="index>
    </div>
</body>

<script type="text/javascript" src="./js/vue.min.js"></script>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script type="text/javascript">
	Vue.use(VueLazyload, {
	 	preLoad: 1.3,
	 	error: '自己的error图片',
	 	loading: '自己的loading图片',
	 	attempt: 1
	})
    var app = new Vue({
        el:"#app",
        data:{
            List:'',//图片 或后台传来的图片
        },
    })

</script>

</html>