前端——图片懒加载-CSDN博客

本文链接：https://blog.csdn.net/weixin_44669966/article/details/124795502
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	ul {
		/* 取消列表样式 */
		list-style: none;
	}
	.wrap {
		/* 占总宽度的80% */
		width: 80%;
		margin: 0 auto;
	}
	/* ul部分 */
	.img-list {
		/* 占上一级宽度的100% */
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
	}
	/* li部分 */
	.img-item {
		float: left;
		width: 50%;
		padding: 15px;
		box-sizing: border-box;
	}
	.img-wrap {
		width: 100%;
	}
	.list-img {
		width: 100%;
		/* height: 100%; */
	}
</style>

<body>
	
	<div class="wrap">
		<ul class="img-list J_imgList"></ul>
	</div>
	<!-- 代码模板 -->
    <script type="text/html" id="J_imgTpl">
		<li class="img-item">
			<div class="img-wrap">
				<img src="000.png" data-src="{{img}}" alt="" class="list-img">
			</div>
			<dic class="img-tt">
				<h1>{{name}}</h1>
			</dic>
		</li>
    </script>
	<script>
		var data = [
			{"img": "C:/Users/HP/Pictures/load/1.png", "name": "00000"},
			{"img": "C:/Users/HP/Pictures/load/2.png", "name": "00001"},
			{"img": "C:/Users/HP/Pictures/load/3.png", "name": "00010"},
			{"img": "C:/Users/HP/Pictures/load/4.png", "name": "00011"},
			{"img": "C:/Users/HP/Pictures/load/5.png", "name": "00100"},
			{"img": "C:/Users/HP/Pictures/load/6.png", "name": "00101"},
			{"img": "C:/Users/HP/Pictures/load/7.png", "name": "00110"},
			{"img": "C:/Users/HP/Pictures/load/8.png", "name": "00111"},
			{"img": "C:/Users/HP/Pictures/load/9.png", "name": "01000"},
			{"img" : "C:/Users/HP/Pictures/load/10.png", "name": "01001"},
			{"img" : "C:/Users/HP/Pictures/load/11.png", "name": "01010"},
			{"img" : "C:/Users/HP/Pictures/load/12.png", "name": "01011"},
			{"img" : "C:/Users/HP/Pictures/load/13.png", "name": "01100"},
			{"img" : "C:/Users/HP/Pictures/load/14.png", "name": "01101"},
			{"img" : "C:/Users/HP/Pictures/load/15.png", "name": "01110"},
			{"img" : "C:/Users/HP/Pictures/load/16.png", "name": "01111"},
			{"img" : "C:/Users/HP/Pictures/load/17.png", "name": "10000"},
			{"img": "C:/Users/HP/Pictures/load/1.png", "name": "00000"},
			{"img": "C:/Users/HP/Pictures/load/2.png", "name": "00001"},
			{"img": "C:/Users/HP/Pictures/load/3.png", "name": "00010"},
			{"img": "C:/Users/HP/Pictures/load/4.png", "name": "00011"},
			{"img": "C:/Users/HP/Pictures/load/5.png", "name": "00100"},
			{"img": "C:/Users/HP/Pictures/load/6.png", "name": "00101"},
			{"img": "C:/Users/HP/Pictures/load/7.png", "name": "00110"},
			{"img": "C:/Users/HP/Pictures/load/8.png", "name": "00111"},
			{"img" : "C:/Users/HP/Pictures/load/9.png", "name": "01000"},
			{"img" : "C:/Users/HP/Pictures/load/10.png", "name": "01001"},
			{"img" : "C:/Users/HP/Pictures/load/11.png", "name": "01010"},
			{"img" : "C:/Users/HP/Pictures/load/12.png", "name": "01011"},
			{"img" : "C:/Users/HP/Pictures/load/13.png", "name": "01100"},
			{"img" : "C:/Users/HP/Pictures/load/14.png", "name": "01101"},
			{"img" : "C:/Users/HP/Pictures/load/15.png", "name": "01110"},
			{"img" : "C:/Users/HP/Pictures/load/16.png", "name": "01111"},
			{"img" : "C:/Users/HP/Pictures/load/17.png", "name": "10000"},
		]
		;(function(data) {
			// 获得ul
			var oImgList = document.getElementsByClassName("J_imgList")[0]
			// li模板
			var imgTpl = document.getElementById("J_imgTpl").innerHTML
			// 所有的img标签
			var oImgs = document.getElementsByClassName("list-img")

			// 初始化
			var init = function() {
				rednerList(data)
				bindEvent()
				// 页面刷新回到顶部
				setTimeout(function() {
					window.scrollTo(0, 0)
				}, 150)
			}
			var bindEvent = function() {
				// 页面加载时加载可视部分图片
				window.addEventListener('load', throttle(imgLazyLoad(oImgs), 800))
				window.addEventListener('scroll', throttle(imgLazyLoad(oImgs), 800))
			}
			// 懒加载的图片
			function imgLazyLoad(images) {
				var imgItem,
					cHeight = window.innerHeight || document.documentElement.clientHeight;
					// 优化方式二
					return function() {
						var sTop = document.documentElement.scrollTop || document.body.scrollTop
						// 优化方式一
						var n=0
						for(let i = n; i<images.length;i++) {
							imgItem = images[i]
							// 首屏加载_____如果当前元素的高度小于窗口尺寸,那么就显示
							if(imgItem.offsetTop < cHeight+sTop) {
								// 如果这个属性不为空
								if(imgItem.getAttribute('data-src')) {
									// 绑定src
									imgItem.src = imgItem.getAttribute('data-src')
									// 绑定之后移除这个属性
									imgItem.removeAttribute('data-src')
								}
								// 从上次加载之后的地方开始加载
								n++
							}
						}
					}
			}
			// 渲染
			var rednerList = function(data) {
				// 将list放入ul中
				oImgList.innerHTML = data.reduce((pre, cur) => {
					return pre += imgTpl.replace(/{{(.*)}}/g, function(node, key) {
						return {
							name: cur.name,
							img: cur.img
						}[key]
					})
				}, '')
			}
			
			init()
		}(data));
		// 节流函数
		function throttle(fun, time) {
			let timer
			console.log("ninini")
			return function() {
				console.log("触发")
				if(timer) return
				timer = setTimeout(function() {
					fun.apply(this, arguments)
					timer = null
				}, time)
			}
		}
	</script>
</body>
</html>