js实现懒加载

最新推荐文章于 2024-08-23 11:48:03 发布
最新推荐文章于 2024-08-23 11:48:03 发布
阅读量1.7k 收藏 8
点赞数 1
分类专栏： 【JavaScript】 文章标签： js懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnluolei/article/details/83933065
版权

当一个页面有很多数据的时候，需要全部加载后，才显示，网速不好时需要等很久。当用懒加载后，就只加载可视区的数据，反应更快，效果更好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js Learning -懒加载</title>
		<style type="text/css">
			#box{
				width:80%;
				margin:0 auto;
			}
			#box li{
				list-style: none;
				width:180px;
				height:250px;
				border: 1px solid black;
				float:left;
				margin-left: 20px;
				margin-top: 20px;
			}
			#box img{
				width:100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<div id='box'>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
		</div>
	</body>
	<script type="text/javascript">
		//获取所有图片
		var aImage = document.getElementsByTagName('img');
		//获取可视区高度
		var height = document.documentElement.clientHeight;
			
		//当滚动时触发
		window.onload = window.onscroll = function(){
			//得到滚动卷起高度
			var scrollTop = document.documentElement.scrollTop;
			//遍历所有图片
			for(var i = 0 ; i < aImage.length ; i++ ){
				//获取该图片举例网页顶部和可视区高度,判断是否显示
				//距网页顶部高度
				var top = aImage[i].offsetTop;
				console.log('scrollTop='+scrollTop);
				console.log(top +"<="+ height + scrollTop);
				if(top <=  height + scrollTop){
					aImage[i].src = aImage[i].getAttribute('_src');
				}
			}
			
		};

	</script>
</html>
csdnluolei
关注
专栏目录
javascript 实现懒加载效果
06-06
JavaScript 实现懒加载效果是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片或某些资源，从而提高页面加载速度并减少服务器带宽消耗。在这个主题中，我们将深入探讨JavaScript、HTML和CSS...
原生js实现懒加载.zip
03-08
在本文中，我们将深入探讨如何使用原生JavaScript实现懒加载技术，特别关注如何模拟美团外卖应用中的滚动加载效果。懒加载是一种优化网页性能的技术，它只在用户滚动到页面可见区域时才加载图像或其他资源，从而减少...
JS实现页面数据懒加载
11-20
页面数据懒加载。Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。 以下为目前实现的方法： <!-- page lazyloading --> [removed] $(function(){ // 设置布尔值用于判断是否该DIV到达过可视区域 var scrollflaga = true; // 监听滚
js懒加载
bamo3265的博客
11-09 160
懒加载的实现： 1.懒加载的作用和原理： 在我们展示过多图片的时候，类似于淘宝的图片有很多，全部从服务器请求会给用户带来糟糕的体验，所以为了提高用户体验，下拉逐渐加载。 每个图片的src都会有一个get请求，我们把不能看到的图片src设置相同的图片，这些图片发一次请求即可，设置属性data-imgurl为真正的路径。当图片滚动到可视区域时，我们就用js把data-imgurl赋值到...
前端html+js实现懒加载的两种常见方法
最新发布
m0_72678953的博客
08-23 265
忘记啥原因了，对图片懒加载有点好奇，于是乎查了一下有哪些方法，在这里记录下来。
JS基础 | 实现懒加载
m0_73460278的博客
08-28 837
懒加载：只在数据或内容即将进入视口或即将需要的时候才加载。
bootstrap-treeview树节点实现动态加载（懒加载）
12-22
- JavaScript源码文件：包含实现懒加载功能的修改后的Bootstrap Treeview代码。 - 示例HTML文件：展示了如何在实际项目中使用此增强版的Bootstrap Treeview。 - 可能还包含示例数据或测试用例，用于验证和展示懒加载...
JavaScript实现懒加载
weixin_51422386的博客
12-05 3206
项目性能优化
懒加载js控件 dropload.min.js
10-27
附件包括移动端懒加载效果的控件及样式 dropload.min.js、 dropload.css
JavaScript 懒加载
Vent_NCS的博客
09-20 547
JavaScript 懒加载 懒加载，顾名思义，就是不急慢慢来，等迫不得已的时候再加载； 在网页刚打开时，很可能因为请求太多而一时拥塞，并且习惯性的在body后有JavaScript脚本，这样一来就容易发生页面卡顿或崩溃等问题；所以我们可以采取动态加载的方式来让请求变得稀疏； 原理： 浏览器遇到src属性会阻塞渲染树，先下载内容，如果是脚本的话还会运行； 先将img标签中的src链接设为同一...
JS实现懒加载
Orange_Sheep的博客
08-25 788
懒加载及应用场景 懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 实现的思路： 给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src）， 监听scroll事件，当图片出现在可视区时，将data-src值赋值给s
JavaScript的懒加载处理
杜永康的博客
10-12 1833
懒加载（Lazy Loading）是一种优化技术，它可以延迟加载某些资源，直到它们真正需要被使用的时候才进行加载。这种技术可以提升应用程序或网站的性能，减少初始加载时间。
JS懒加载
LYL000305的博客
04-22 853
懒加载思路： +最开始加载页面，img的src不赋值，不会加载图片,把真实图片的地址赋值给img的自定义属性，方便后期想加载真实图片的时候获取 +如果src不赋值或者加载图片是错误的，会显示碎图，所以我们最开始让img是隐藏的【可以设置display，也可以设置透明度为0（透明度改变可以设置过度效果）】 +给图片所在的盒子设置背景占位图（或者背景颜色），在真实图片没有加载之前，用其占位【盒子宽高要事先设置好】 ---------------------------------------------
用JavaScript实现懒加载
05-17
下面是用 JavaScript 实现懒加载的简单示例： 首先，我们需要在 HTML 中将需要延迟加载的资源（比如图片）的 `src` 属性替换为 `data-src` 属性，如下所示： ```html ``` 接下来，我们需要编写 JavaScript 代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值