js实现懒加载

最新推荐文章于 2023-10-12 19:07:31 发布
原创 最新推荐文章于 2023-10-12 19:07:31 发布 · 1.8k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js懒加载

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

<!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>
JS实现页面数据懒加载
11-20
页面数据懒加载。Div移动到可视区域再去ajax加载内容。 最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。 以下为目前实现的方法： <!-- page lazyloading --> [removed] $(function(){ // 设置布尔值用于判断是否该DIV到达过可视区域 var scrollflaga = true; // 监听滚
js懒加载
bamo3265的博客
11-09 237
懒加载的实现： 1.懒加载的作用和原理： 在我们展示过多图片的时候，类似于淘宝的图片有很多，全部从服务器请求会给用户带来糟糕的体验，所以为了提高用户体验，下拉逐渐加载。 每个图片的src都会有一个get请求，我们把不能看到的图片src设置相同的图片，这些图片发一次请求即可，设置属性data-imgurl为真正的路径。当图片滚动到可视区域时，我们就用js把data-imgurl赋值到...
JS基础 | 实现懒加载
m0_73460278的博客
08-28 1225
懒加载：只在数据或内容即将进入视口或即将需要的时候才加载。
javascript 实现懒加载效果
06-06
JavaScript 实现懒加载效果是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片或某些资源，从而提高页面加载速度并减少服务器带宽消耗。在这个主题中，我们将深入探讨JavaScript、HTML和CSS...
原生js实现懒加载.zip
03-08
在本文中，我们将深入探讨如何使用原生JavaScript实现懒加载技术，特别关注如何模拟美团外卖应用中的滚动加载效果。懒加载是一种优化网页性能的技术，它只在用户滚动到页面可见区域时才加载图像或其他资源，从而减少...
bootstrap-treeview树节点实现动态加载（懒加载）
12-22
- JavaScript源码文件：包含实现懒加载功能的修改后的Bootstrap Treeview代码。 - 示例HTML文件：展示了如何在实际项目中使用此增强版的Bootstrap Treeview。 - 可能还包含示例数据或测试用例，用于验证和展示懒加载...
JavaScript实现懒加载
weixin_51422386的博客
12-05 3384
项目性能优化
懒加载js控件 dropload.min.js
10-27
附件包括移动端懒加载效果的控件及样式 dropload.min.js、 dropload.css
JavaScript 懒加载
Vent_NCS的博客
09-20 627
JavaScript 懒加载 懒加载，顾名思义，就是不急慢慢来，等迫不得已的时候再加载； 在网页刚打开时，很可能因为请求太多而一时拥塞，并且习惯性的在body后有JavaScript脚本，这样一来就容易发生页面卡顿或崩溃等问题；所以我们可以采取动态加载的方式来让请求变得稀疏； 原理： 浏览器遇到src属性会阻塞渲染树，先下载内容，如果是脚本的话还会运行； 先将img标签中的src链接设为同一...
JS实现懒加载
Orange_Sheep的博客
08-25 918
懒加载及应用场景 懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 实现的思路： 给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src）， 监听scroll事件，当图片出现在可视区时，将data-src值赋值给s
JS中三种实现懒加载的方法！
weixin_74535649
08-10 4166
JS中三种实现懒加载的方法！
JavaScript的懒加载处理
杜永康的博客
10-12 2070
懒加载（Lazy Loading）是一种优化技术，它可以延迟加载某些资源，直到它们真正需要被使用的时候才进行加载。这种技术可以提升应用程序或网站的性能，减少初始加载时间。
JS懒加载
LYL000305的博客
04-22 918
懒加载思路： +最开始加载页面，img的src不赋值，不会加载图片,把真实图片的地址赋值给img的自定义属性，方便后期想加载真实图片的时候获取 +如果src不赋值或者加载图片是错误的，会显示碎图，所以我们最开始让img是隐藏的【可以设置display，也可以设置透明度为0（透明度改变可以设置过度效果）】 +给图片所在的盒子设置背景占位图（或者背景颜色），在真实图片没有加载之前，用其占位【盒子宽高要事先设置好】 ---------------------------------------------
js实现懒加载和预加载
最新发布
07-10
<think>我们使用中文回答用户的问题。用户要求实现懒加载和预加载的JavaScript代码，并在最后提出3-5个相关问题，且以“§§相关问题§§”开头，不换行分散。 懒加载（Lazy Loading）：延迟加载图片或其他资源，直到它们进入视口（viewport）或即将进入视口时再加载。这可以提升页面加载速度和性能。 预加载（Preloading）：提前加载后续可能需要的资源（如图片、脚本等），以便在用户需要时能够快速展示，提升用户体验。 下面分别给出懒加载和预加载的简单实现示例： ### 懒加载实现（以图片为例） 通常，我们使用`data-src`属性存放真实的图片路径，当图片进入视口时，将`data-src`的值赋给`src`属性。 HTML结构示例： ```html <img class="lazy" data-src="path/to/real-image.jpg" src="placeholder.jpg" alt="example"> ``` JavaScript实现： ```javascript document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove("lazy"); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // 不支持IntersectionObserver的回退方案 // 可以监听scroll事件，使用getBoundingClientRect判断是否在视口内 // 这里为了简洁省略回退代码，实际项目中需要考虑 } }); ``` ### 预加载实现 预加载可以通过多种方式实现，例如使用`<link rel="preload">`标签，或者用JavaScript创建Image对象。 使用JavaScript预加载图片： ```javascript function preloadImage(url) { const img = new Image(); img.src = url; } // 预加载多张图片 const imageUrls = [ 'image1.jpg', 'image2.jpg', // 更多图片 ]; imageUrls.forEach(url => preloadImage(url)); ``` 使用`<link>`标签（在HTML中）： ```html <link rel="preload" href="important-image.png" as="image"> ``` 注意：预加载可能会增加初始网络请求的负担，因此应谨慎使用，只预加载关键资源。 ### 回答总结 以上分别介绍了懒加载和预加载的概念及简单实现。懒加载适用于长页面中的图片或其他资源，以减少初始加载时间；预加载则用于提前加载用户可能很快访问的资源，以提升后续页面的响应速度。 §§相关问题§§ 1. 懒加载和预加载在性能优化中的优缺点分别是什么？ 2. 除了图片，懒加载和预加载还可以应用于哪些类型的资源？ 3. 如何实现一个支持懒加载的滚动列表（包括动态加载的数据）？ 4. 在实现懒加载时，如何处理浏览器兼容性问题（如不支持IntersectionObserver的情况）？ 5. 预加载的资源在浏览器缓存中会保存多久？如何控制？</think>### JavaScript实现懒加载和预加载 #### 懒加载实现（Lazy Loading） 懒加载核心思想：当资源进入可视区域时再加载 ```javascript // 图片懒加载实现 const lazyImages = document.querySelectorAll('img[data-src]'); const imgObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); } }); }, { rootMargin: '0px 0px 200px 0px' }); // 提前200px加载 lazyImages.forEach(img => { imgObserver.observe(img); }); ``` #### 预加载实现（Preloading） 预加载核心思想：提前加载后续需要的资源 ```javascript // 图片预加载实现 function preloadImages(imageUrls) { imageUrls.forEach(url => { const img = new Image(); img.src = url; }); } // 使用示例 preloadImages([ 'hero-banner.jpg', 'featured-product.png', 'promo-video-poster.jpg' ]); // 使用<link>标签预加载（推荐方式） const preloadLink = document.createElement('link'); preloadLink.rel = 'preload'; preloadLink.as = 'image'; preloadLink.href = 'critical-image.jpg'; document.head.appendChild(preloadLink); ``` #### 核心区别对比 | **特性** | 懒加载 | 预加载 | |----------------|---------------------------|---------------------------| | **加载时机** | 进入可视区域时加载 | 提前加载关键资源 | | **适用场景** | 长页面/非首屏内容 | 关键路径资源/下一页内容 | | **性能影响** | 减少初始加载量 | 增加初始加载量但提升后续体验 | | **实现复杂度** | 需监听滚动/交叉观察 | 简单声明即可 | #### 最佳实践建议 1. **懒加载适用**：商品列表、评论区、图库等非首屏内容 2. **预加载适用**：首屏大图、字体文件、关键CSS/JS 3. **组合使用**：首屏关键资源预加载 + 非关键内容懒加载 4. **添加加载状态**：使用占位符或加载动画提升体验 5. **兼容处理**：对不支持IntersectionObserver的浏览器提供polyfill
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值