js实现懒加载

最新推荐文章于 2025-03-27 10:23:06 发布
最新推荐文章于 2025-03-27 10:23:06 发布
阅读量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>
javascript 实现懒加载效果
06-06
JavaScript 实现懒加载效果是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片或某些资源，从而提高页面加载速度并减少服务器带宽消耗。在这个主题中，我们将深入探讨JavaScript、HTML和CSS...
原生js实现懒加载.zip
03-08
在本文中，我们将深入探讨如何使用原生JavaScript实现懒加载技术，特别关注如何模拟美团外卖应用中的滚动加载效果。懒加载是一种优化网页性能的技术，它只在用户滚动到页面可见区域时才加载图像或其他资源，从而减少...
Vue 渲染函数与 JSX：高级渲染技巧与动态组件构建
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-23 1182
渲染函数（render）是 Vue 组件中用来生成虚拟 DOM 的函数。它可以替代模板（template），允许开发者使用 JavaScript 来编写渲染逻辑。Vue 的渲染函数的返回值是虚拟 DOM（Virtual DOM），这个虚拟 DOM 会被 Vue 的响应式系统和渲染引擎转化为实际的 DOM 元素。与模板不同，渲染函数给开发者提供了更大的灵活性和控制力，特别是在需要动态生成复杂组件结构或进行某些条件渲染时，渲染函数能够展现出它的优势。
JS实现页面数据懒加载
11-20
页面数据懒加载。Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。 以下为目前实现的方法： <!-- page lazyloading --> [removed] $(function(){ // 设置布尔值用于判断是否该DIV到达过可视区域 var scrollflaga = true; // 监听滚
如何在 JavaScript 中实现懒加载（Lazy Loading）？
最新发布
qq_38822390的博客
03-27 410
懒加载是一种按需加载的策略，意味着只有在用户滚动到页面的特定位置或需要访问某项资源时，才会加载该资源。通过这种方式，可以减少初始页面加载的资源，提升用户体验。懒加载是一种有效的性能优化技术，通过延迟加载资源，能够显著提高网页的加载速度和用户体验。
js懒加载
bamo3265的博客
11-09 197
懒加载的实现： 1.懒加载的作用和原理： 在我们展示过多图片的时候，类似于淘宝的图片有很多，全部从服务器请求会给用户带来糟糕的体验，所以为了提高用户体验，下拉逐渐加载。 每个图片的src都会有一个get请求，我们把不能看到的图片src设置相同的图片，这些图片发一次请求即可，设置属性data-imgurl为真正的路径。当图片滚动到可视区域时，我们就用js把data-imgurl赋值到...
JS基础 | 实现懒加载
m0_73460278的博客
08-28 1121
懒加载：只在数据或内容即将进入视口或即将需要的时候才加载。
bootstrap-treeview树节点实现动态加载（懒加载）
12-22
- JavaScript源码文件：包含实现懒加载功能的修改后的Bootstrap Treeview代码。 - 示例HTML文件：展示了如何在实际项目中使用此增强版的Bootstrap Treeview。 - 可能还包含示例数据或测试用例，用于验证和展示懒加载...
JavaScript实现懒加载
weixin_51422386的博客
12-05 3327
项目性能优化
懒加载js控件 dropload.min.js
10-27
附件包括移动端懒加载效果的控件及样式 dropload.min.js、 dropload.css
JavaScript 懒加载
Vent_NCS的博客
09-20 605
JavaScript 懒加载 懒加载，顾名思义，就是不急慢慢来，等迫不得已的时候再加载； 在网页刚打开时，很可能因为请求太多而一时拥塞，并且习惯性的在body后有JavaScript脚本，这样一来就容易发生页面卡顿或崩溃等问题；所以我们可以采取动态加载的方式来让请求变得稀疏； 原理： 浏览器遇到src属性会阻塞渲染树，先下载内容，如果是脚本的话还会运行； 先将img标签中的src链接设为同一...
JS实现懒加载
Orange_Sheep的博客
08-25 835
懒加载及应用场景 懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 实现的思路： 给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src）， 监听scroll事件，当图片出现在可视区时，将data-src值赋值给s
JavaScript的懒加载处理
杜永康的博客
10-12 1985
懒加载（Lazy Loading）是一种优化技术，它可以延迟加载某些资源，直到它们真正需要被使用的时候才进行加载。这种技术可以提升应用程序或网站的性能，减少初始加载时间。
用JavaScript实现懒加载
05-17
懒加载（Lazy Loading）是一种优化网页性能的技术，它可以在页面加载完毕后，延迟加载一些不是必要的资源，比如图片、视频等，从而减少页面的加载时间，提高用户的体验。 下面是用 JavaScript 实现懒加载的简单示例： 首先，我们需要在 HTML 中将需要延迟加载的资源（比如图片）的 `src` 属性替换为 `data-src` 属性，如下所示： ```html <img data-src="path/to/image.jpg"> ``` 接下来，我们需要编写 JavaScript 代码来实现懒加载。具体实现步骤如下： 1. 获取所有需要延迟加载的元素 2. 监听滚动事件，当元素出现在视口内时，动态加载资源 3. 将 `data-src` 属性的值赋给 `src` 属性 下面是完整的 JavaScript 代码： ```javascript window.addEventListener('DOMContentLoaded', function() { const lazyImages = document.querySelectorAll('img[data-src]'); const windowHeight = window.innerHeight; function lazyLoad() { lazyImages.forEach(image => { const imageTop = image.getBoundingClientRect().top; if (imageTop < windowHeight) { image.src = image.dataset.src; image.removeAttribute('data-src'); } }); } window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); }); ``` 在这段代码中，我们首先使用 `document.querySelectorAll` 获取所有带有 `data-src` 属性的图片元素。接着，我们获取浏览器窗口的高度，并定义 `lazyLoad` 函数，用于实现懒加载。在 `lazyLoad` 函数中，我们遍历所有需要延迟加载的图片元素，并使用 `getBoundingClientRect()` 方法获取元素的位置信息。如果元素的顶部位置小于浏览器窗口的高度，就将 `data-src` 属性的值赋给 `src` 属性，并移除 `data-src` 属性。 最后，我们监听 `scroll` 和 `resize` 事件，当页面滚动或窗口大小发生变化时，重新执行 `lazyLoad` 函数，以确保所有需要延迟加载的元素都能被正确加载。 注意：以上代码仅为示例，实际应用中需要根据具体情况进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值