JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载，算法简单、易于理解、萌新福音

本文链接：https://blog.csdn.net/Z_B_L/article/details/132896818

懒加载？什么是懒加载？・ࡇ・？

很多萌新刚见到这个词时一定一头雾水，懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果内容很多，所有的内容都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

通俗来讲就是优化网页，使其更高效 (♡ര‿ര)

所以今天就教大家如何使用JS代码来实现懒加载的效果

| ू•ૅω•́)ᵎᵎᵎ 开始演示：

创建html文件（我用的HbuildX演示）

然后创建html结构：

<div id="box">
	<div id="content"></div>
</div>
<p class="hint">正在加载中。。。</p>

然后是CSS样式：

        <style>
			*{
				margin: 0;
				padding: 0;
			}
			#content{
				width: 100%;
				height: 200px;
				background-color: #1ACFFC;
				margin: 10px 0;
			}
			#hint{
				width: 100%;
				height: 30px;
				text-align: center;
				background-color: #F9CFCD;
			}
		</style>

当前效果（这里加了移动端适配）：

下面就开始JS部分了ԅ(≖‿≖ԅ)

假设data为数据总数，num为每次显示条数，那么我们一步一步来，先获取元素，将基础的5条渲染出来

        <script>
			// 数据总数
			let data = 23
			// 一次显示的数量
			let num = 5
			// 获取页面父元素
			let box = document.getElementById("box")
			renders()
			// 页面渲染函数
			function renders(){
				let str = ''
				for(let i = 0 ; i < num ; i++){
					str += `<div id="content"></div>`
				}
				box.innerHTML = str
			}
			
		</script>

效果：

接下来就是如何渲染剩余的数据，和如何限制数据渲染，实现懒加载效果

一步一步来：首先添加scroll事件

// 给window添加事件监听，监听scroll事件
window.addEventListener("scroll",lazyLoad)

窗口可视区域的高+滚动条滚动的高度是否大于或等于网页整体内容的高度，如果大于，num数量增加，也就是划到底渲染剩余的内容，每次数量增加都要清除事件监听，以防止滚动事件重复触发

            // 事件内容
			function lazyLoad() {
				// 窗口可视区域的高+滚动条滚动的高度 是否大于或等于网页整体内容的高度
				if (window.scrollY + window.innerHeight > document.body.scrollHeight) {
					num += 5
					if (num >= data) {
						num = data;
					}
					window.removeEventListener("scroll", ；lazyload);
				}
			}

清除后，设置定时器，一秒后再将新的div数量渲染出来，并且判断渲染的数量是否等于总和的数量，如果不等于，说明还有没渲染出来的div，所以重新给wiindow绑定事件监听的scroll事件。

若相等，说明全部渲染完毕，将尾部提示信息改为“暂无更多商品”

        // 事件内容
			function lazyLoad() {
				// 窗口可视区域的高+滚动条滚动的高度 是否大于或等于网页整体内容的高度
				if (window.scrollY + window.innerHeight > document.body.scrollHeight) {
					num += 5
					if (num >= data) {
						num = data;
					}
					window.removeEventListener("scroll", lazyLoad);
					// 添加定时器
					setTimeout(function() {
						renders();
						if (num != data) {
							window.addEventListener("scroll", lazyLoad);
						} else {
							document.getElementById("hint").innerHTML = "暂无更多商品"
						}
					}, 1000)
				}
			}

效果如下：

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
            maximum-scale=1.0,user-scalable=no">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#content {
				width: 100%;
				height: 200px;
				background-color: #1ACFFC;
				margin: 10px 0;
			}

			#hint {
				width: 100%;
				height: 30px;
				text-align: center;
				background-color: #F9CFCD;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="content"></div>
		</div>

		<p id="hint">正在加载中。。。</p>

		<script>
			// 数据总数
			let data = 23
			// 一次显示的数量
			let num = 5
			// 获取页面父元素
			let box = document.getElementById("box")
			renders()
			// 页面渲染函数
			function renders() {
				let str = ''
				for (let i = 0; i < num; i++) {
					str += `<div id="content"></div>`
				}
				box.innerHTML = str
			}
			// 给window添加事件监听，监听scroll事件
			window.addEventListener("scroll", lazyLoad)

			// 事件内容
			function lazyLoad() {
				// 窗口可视区域的高+滚动条滚动的高度 是否大于或等于网页整体内容的高度
				if (window.scrollY + window.innerHeight > document.body.scrollHeight) {
					num += 5
					if (num >= data) {
						num = data;
					}
					window.removeEventListener("scroll", lazyLoad);
					// 添加定时器
					setTimeout(function() {
						renders();
						if (num != data) {
							window.addEventListener("scroll", lazyLoad);
						} else {
							document.getElementById("hint").innerHTML = "暂无更多商品"
						}
					}, 1000)
				}
			}
			
			
		</script>


	</body>
</html>

（Ps：作者纯新人，本文仅用来分享所学知识并加以运用，若有什么错误，还恳请路过的大佬多多批评(♡ര‿ര)）