三种方式实现图片懒加载 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>懒加载图片三种方式</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0 20%;
		}
		.contain{
			width: 100%;
			min-height: 100vh;
			background-color: #F2F2F2;
		}
			img{
				display: block;
				width: 100%;
				height: 800px;
				transition: all 3s;
			}
		</style>
	</head>
	<body>
		<div class="contain">
				<img data-src="./images/banner (1).jpeg" >
				<img data-src="./images/banner (2).jpeg" >
				<img data-src="./images/banner (3).jpeg" >
				<img data-src="./images/banner (4).jpeg" >
				<img data-src="./images/banner (5).jpeg" >
				<img data-src="./images/banner (6).jpeg" >
				<img data-src="./images/banner (7).jpeg" >
				<img data-src="./images/banner (8).jpeg" >
				<img data-src="./images/banner (9).jpeg" >
			</div>
		<script>
		/* 第一种：通过scrollTop等 */
			// const imgs = document.querySelectorAll("img")
			// //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
			// function getTop(e) {
			// 	var T = e.offsetTop;
			// 	while(e = e.offsetParent) {
			// 		T += e.offsetTop;
			// 	}
			// 	return T;
			// }
			// function lazyLoad(imgs) {
			// 	var H = document.documentElement.clientHeight;//获取可视区域高度
			// 	var S = document.documentElement.scrollTop || document.body.scrollTop;
			// 	for (var i = 0; i < imgs.length; i++) {
			// 		if (H + S > getTop(imgs[i])) {
			// 			imgs[i].src = imgs[i].getAttribute('data-src');
			// 		}
			// 	}
			// }
			// window.onload = window.onscroll = function(){
			// 	lazyLoad(imgs)
			// }
			
		/* 第二种：通过getBoundingClientRect */
			// var imgs = document.querySelectorAll('img');
			
			// //用来判断bound.top<=clientHeight的函数，返回一个bool值
			// function isIn(el) {
			// 	var bound = el.getBoundingClientRect();
			// 	var clientHeight = window.innerHeight;
			// 	console.log(bound)
			// 	console.log(clientHeight+'--')
			// 	return bound.top <= clientHeight;
			// } 
			// //检查图片是否在可视区内，如果不在，则加载
			// function check() {
			// 	Array.from(imgs).forEach(function(el){
			// 		if(isIn(el)){
			// 			loadImg(el);
			// 		}
			// 	})
			// }
			// function loadImg(el) {
			// 	if(!el.src){
			// 		var source = el.dataset.src;
			// 		el.src = source;
			// 	}
			// }
			// window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
			// 	check();
			// }
		/* 第三种：通过IntersectionObserver */
			var io = new IntersectionObserver((entries)=>{
				// entires为监听的节点数组对象
				entries.forEach((item,index) => {
				  console.log(item)
				  if(item.isIntersecting) {
					item.target.src = item.target.getAttribute('data-src')
					// 这里资源加载后就停止进行观察
					io.unobserve(item.target)
				  }
				})
			});
			let data = Array.from(document.querySelectorAll('img'))
			  data.forEach(item => {
				// observe用来观察指定的DOM节点
			     io.observe(item)
			  })
		</script>
	</body>
</html>

　　

posted @ 2021-12-07 15:11  李昂唐  阅读(246)  评论(0)    收藏  举报