预加载

预加载: 提前加载资源会同源加载优化，同源加载优化就是相同的资源加载多次时只会加载1次是浏览器自带的功能，浏览器会将已经加载的资源放入临时缓存文件中，再次加载这个资源时就在临时缓存文件中取出再渲染资源到页面上。比如网页内部的资源是异步加载的且资源是必须要加载的。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			//预加载
			var img1=new Image();
			//创建一个Image对象：var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。
                        img1.src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658422800&t=d974afe62dd1225c4faa14b1538bf7f5";
		</script>
		
	</head>
	<body>
		<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658422800&t=d974afe62dd1225c4faa14b1538bf7f5">
		
		<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658422800&t=d974afe62dd1225c4faa14b1538bf7f5">
		
		<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658422800&t=d974afe62dd1225c4faa14b1538bf7f5">
         </body>

懒加载

懒加载: 先不加载，等条件成立时再加载。比如百度页面的新闻加载，是随着页面滑动的一定位置再去加载。

加载：做网络请求，就是将资源编码请求过来。

	<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>
			window.onload=function(){
				document.onscroll=function(e){
					let top=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop//body元素滚动条已经滚动了的距离
					let h=cHeight =window.innerHeight||document.body.clientHeight;
                                        //条件成立了滚动条滚到相应位置这一刻就做资源加载
					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>

滚动条滚到相应位置再做网络请求就是懒加载，先不加载，等条件成立时再加载。

预加载和懒加载

预加载

懒加载