图片懒加载-CSDN博客

本文链接：https://blog.csdn.net/ld16631069828/article/details/119152829

图片懒加载

首先说一下懒加载的原理，我们知道浏览器在加载图片是通过src的地址进行访问的，如果加载图片数量少了还可以，如果是图片类型的网站，加载多个图片这无不是给浏览器请求增加了负担，所以我们通过用户浏览的情况来加载一定的数量，比如说,用户刚打开网页浏览时，看到的是整个浏览器窗口的大小，我们就先加载一定数量的图片信息，这样就给浏览器请求有了一定的缓解时间，当用户下拉页面时触发再次请求图片信息，这样缓解了浏览器的压力，还给用户一种在请求数据的体验。

原理

1.先写html,我们将src的请求地址给到空，这样刚开始是不会请求数据的，然后给img加上一个data-src属性，用来存放真实图片地址的信息，（data-src这个名字可以换成其他名字，这是自定义的名字）
2.js部分就是先获取到所有带有img标签图片集合
3.用window.onscroll来监听用户的行为，（混动滑轮）
4.滑动滑轮触发lazyloader函数
5.函数中对图片进行一个循环，判断每一张图片距离顶部的位置，（offsetTop），然后和屏幕高度加上滑动块儿距离顶部的高度（这边是为了算出滑动的高度+当前屏幕高度=当前位置距离顶部的位置高度）。
6.我们在外面定义了一个i = 0，为了防止，已经加载过了的图片再次重复进行循环判断

具体实现如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片懒加载</title>
		<style type="text/css">
			img {
				display: block;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<img src="" alt="" data-src="./img/1.jpeg">
			<img src="" alt="" data-src="./img/2.jpeg">
			<img src="" alt="" data-src="./img/10.jpeg">
			<img src="" alt="" data-src="./img/11.jpeg">
			<img src="" alt="" data-src="./img/12.jpeg">
			<img src="" alt="" data-src="./img/13.jpeg">
			<img src="" alt="" data-src="./img/16.jpeg">
			<img src="" alt="" data-src="./img/18.jpeg">
			<img src="" alt="" data-src="./img/19.jpeg">
			<img src="" alt="" data-src="./img/20.jpeg">
			<img src="" alt="" data-src="./img/21.jpeg">
			<img src="" alt="" data-src="./img/22.jpeg">
			<img src="" alt="" data-src="./img/23.jpeg">
			<img src="" alt="" data-src="./img/24.jpeg">
			<img src="" alt="" data-src="./img/25.jpeg">
			<img src="" alt="" data-src="./img/26.jpeg">
			<img src="" alt="" data-src="./img/27.jpeg">
			<img src="" alt="" data-src="./img/28.jpeg">
			<img src="" alt="" data-src="./img/29.jpeg">
			<img src="" alt="" data-src="./img/30.jpeg">
			<img src="" alt="" data-src="./img/4.jpeg">
			<img src="" alt="" data-src="./img/5.jpeg">
			<img src="" alt="" data-src="./img/6.jpeg">
			<img src="" alt="" data-src="./img/7.jpeg">
			<img src="" alt="" data-src="./img/8.jpeg">
			<img src="" alt="" data-src="./img/9.jpeg">
			<img src="" alt="" data-src="./img/13.jpeg">
			<img src="" alt="" data-src="./img/15.jpeg">
			<img src="" alt="" data-src="./img/16.jpeg">
			<img src="" alt="" data-src="./img/20.jpeg">
		</div>
		<script type="text/javascript">
			//获取所有图片信息
			var imglength = document.getElementsByTagName("img");
			console.log(imglength);
			let n = 0;//为了防止已经加载过了的图片再次进行循环判断
			lazyloader();
			//注册窗口滚动事件
			window.onscroll = lazyloader;

			function lazyloader() {
				console.log("你滚动了窗口");
				//获取可见区域的高度（当前可视化窗口高度）
				var nowclientHeight = document.documentElement.clientHeight;
				console.log(nowclientHeight);
				//获取滚动条距离顶部的高度用scrollTop
				var scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
				 console.log(scrolltop + nowclientHeight);
				for (let i = n; i < imglength.length; i++) {
					if (imglength[i].offsetTop < nowclientHeight + scrolltop) {
						if (imglength[i].getAttribute("src") == "") {
							imglength[i].src = imglength[i].getAttribute("data-src");
							console.log("当前n的值是" + n);
							n = i + 1;
						}
					}

				}
			}
		</script>
	</body>
</html>