vue-lazyload使用

最新推荐文章于 2023-06-02 15:19:56 发布
最新推荐文章于 2023-06-02 15:19:56 发布
阅读量411 收藏
点赞数
分类专栏： element vue 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44234050/article/details/119890457
版权

Vue.js vue-lazyload 图片懒加载 前端开发 JavaScript
关键词由CSDN通过智能技术生成
图片 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
vue
13 篇文章 0 订阅
订阅专栏
element
5 篇文章 0 订阅
订阅专栏

在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<style type="text/css">
			.flex,
			.flex li {
				margin: 10px;
				display: flex;
				flex-flow: wrap;
				align-items: center;
				justify-content: center;
			}

			.bgImg li,
			.img li {
				border-radius: 8px;
				background-color: #C0CCDA;
			}

			.img li img {
				border-radius: 8px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="lazyload">
				<!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
				<ul class="img flex">
					<li v-for="(item,index) in List">
						<img v-lazy="item" :alt="item.index" :key="item.index">
					</li>
				</ul>

				<!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
				<ul class="bgImg flex">
					<li v-for="(item,index) in List" v-lazy:background-image="item" :key="item.index"></li>
				</ul>
			</div>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
	<script type="text/javascript">
		Vue.use(VueLazyload, {
			error: this.imgurl,
			loading: this.imgurl,
		})
		let Main = {
			data() {
				return {
					imgurl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
					List: [
						'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
						'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
						'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
						'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
						'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
						'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
						'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
					]
				}
			}
		};
		let Ctor = Vue.extend(Main);
		new Ctor().$mount('#app');
	</script>
</html>
令月十一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 图片懒加载插件 vue-lazyload 使用说明
weixin_33777877的博客
05-18 796
特点 轻量、强大、易用 支持所有图片 支持添加加载时样式 支持 vue1 和 vue2 使用方法 main.js import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) new Vue({ el: '#app', d...
浅谈vue-lazyload实现的详细过程
01-19
本文介绍了浅谈vue-lazyload实现的详细过程，分享给大家，也给自己留个笔记 首先 ,在命令行输入npm install vue-lazyload&&cnpm install vue-lazyload 然后,在main.js里引入这个模块。 import 'VueLazyload' from ...
【vue-lazyload简单使用】
u012632105的博客
02-11 344
vue-lazyload简单使用 - EthanCheung - 博客园
vue-lazyload 简单使用
qq_42619759的博客
12-08 3286
main.js import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, { preLoad: 1, error: require('./assets/imgError.png'), loading: require('./assets/imgLoading.png'), attempt: 2, }) index.vue <template> <div> <div id="lazyloa
vue-lazyload的使用
Mia的博客
05-26 103
坑点： h5端用image标签无效，需要用img标签 <img v-lazy="item0" :key="item0">
VUE—vue-lazyload 在项目中的使用
漫天随飞雪的博客
12-20 1112
安装插件： npm install vue-lazyload --save-dev 或者CDN:https://unpkg.com/vue-lazyload/vue-lazyload.js <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> <script...
vue-lazyload使用总结(推荐)
12-02
在jQuery时代，开发者通常会使用jQuery.lazyload.js来实现图片的懒加载，但随着Vue.js的普及，Vue-Lazyload成为了更符合现代前端框架需求的选择。 Vue-Lazyload的主要功能包括： 1. **延迟加载**：只在图片进入...
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
本文将详细讲解如何使用`vue-lazyload`插件来实现这一功能。 `vue-lazyload`是一个专门针对Vue.js设计的图片懒加载插件，它的主要作用是在图片实际进入视口之前，不进行网络请求，而是先显示一个预设的占位符，等到...
vue图片懒加载 —— vue-lazyload的使用
热门推荐
halo1416的博客
07-31 4万+
前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ----vue-lazyload。 1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦） 2. main.js 中全局引入： import VueLazyLoad from 'vu...
vue-lazyload简单使用
weixin_30284355的博客
07-11 286
vue-lazyload简单使用 npm地址：https://www.npmjs.com/package/vue-lazyload github地址：https://github.com/hilongjw/vue-lazyload 例子：http://hilongjw.github.io/vue-lazyload/ 1安装插件 npm install vue-lazyload --save 或...
【vue】图片懒加载 vue-lazyload 使用
amoureux555的博客
03-15 266
网站优化的一个重点，图片懒加载是其中比较好用的一个方法。vue的图片懒加载插件 ---- vue-lazyload
vue lazyload最基础的使用
wkq_1212的博客
05-30 7382
插件地址：https://github.com/hilongjw/vue-lazyload   图片懒加载基本原理就是，初始时统一将img的src设置为一张默认图片，当图片暴露在你的视线或者达到了你设定的条件，才将真正的图片链接填入img的src属性，从而达到节省性能的目的。  首先我们只是需要最基础的懒加载功能，所以仅仅简单使用的话是很简单的，如果项目有需要再去查阅文档，直接上代码: 1. 安装...
vue图片懒加载vue-lazyload使用方法
巴博尔的学习博客
07-20 859
vue图片懒加载 2020/07/20 需要配置vue的懒加载插件vue-lazyload GitHub地址：https://github.com/hilongjw/vue-lazyload 1.安装插件 npm install vue-lazyload 或者使用CDN <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> 2.在main.js中引用文件，并且配置好图片 // main.js
vue-lazyload懒加载插件的使用
菜鸟的博客
06-12 3586
1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload 2.安装，在vue-cli中安装 npm install vue-lazyload -D 3.在HTML中安装 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"><...
【vue】如何使用vue-lazyload实现图片懒加载
最新发布
freeGameBox的博客
06-02 1378
vue-lazyload是一个简单易用的图片懒加载插件，它可以帮助我们提升网页性能和用户体验。它主要通过自定义指令v-lazy和IntersectionObserver API来实现懒加载的功能。我们只需要安装并引入插件，并在需要懒加载的元素上使用v-lazy指令即可。
vue-lazyload使用方法
06-01
下面是使用 `vue-lazyload` 的方法： 1. 安装 `vue-lazyload` 使用 npm 命令安装 `vue-lazyload`： ```bash npm install vue-lazyload --save ``` 2. 引入 `vue-lazyload` 插件 在 Vue 项目中的 `main.js` 文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值