当前位置：网站首页>DOM之预加载和懒加载

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

4.懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original 自定义属性)中。
2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

5.懒加载的优点是什么？

页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<!-- 懒加载: 先不加载 等条件成立时再加载-->
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p id="p1">hello66666666666</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<p>hello</p>
	<script>
		// 当滚动条  滚到id="p1"的p元素时，才加载后面的资源
		window.onload = function () {
			document.onscroll = function (e) {
				let top = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
				// console.log(p1.offsetTop,top, 6666)
				let h = cHeight = window.innerHeight || document.body.clientHeight;
				console.log(top, img2.offsetTop - h - 100)
				if (top >= (img2.offsetTop - h - 100)) {
					console.log(33333333333)
					img2.src = img2.dataset.src1
				}
			}
		}
	</script>
	<img id="img2"
		data-src1="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658422800&t=f99225a791b634226dcd5ee47c8b5f3f">
</body>

</html>

分析：等滚动条向下滑动到某个位置才开始加载 #img2这张图片。

预加载和懒加载的对比

1)概念：

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2)区别：

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

3)懒加载的意义及实现方式有：

意义：
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

4)预加载的意义及实现方式有：

意义:
预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现方式：
实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。
常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

原网站

版权声明
本文为[前端小草籽]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_47075145/article/details/125922617