javaScript-图片懒加载

最新推荐文章于 2024-08-07 21:58:12 发布

先天性神经靐

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量53

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_56714977/article/details/124733655

版权

JavaScript 懒加载图片加载浏览器滚动性能优化

关键词由CSDN通过智能技术生成

原理：

获取图片距离浏览器可视区顶部的距离，
获取浏览器可视区的高度，通过对两者进行比较
当图片距离浏览器顶部的距离小于浏览器可视区高度时，给图片的src属性赋值

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>懒加载</title>
		<!-- css属性 -->
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			.list{
				width: 200px;
				margin: 0 auto;
			}
			.text{
				width: 100%;
				height: 800px;
				background-color: deeppink;
			}
			li{
				width: 200px;
				height: 300px;
				list-style: none;
				border: 1px solid #000000;
				margin-bottom: 20px;
			}
			li>img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="text"></div>
			<ul class="list">
				<li><img src="" data_src="https://img1.baidu.com/it/u=1299943596,3583747692&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></li>
				<li><img src="" data_src="https://img0.baidu.com/it/u=762329578,2706191642&fm=253&fmt=auto&app=138&f=JPEG?w=354&h=500"></li>
				<li><img src="" data_src="https://img0.baidu.com/it/u=3557404089,3353330025&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=584"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			//获取图片
			const oImgs = document.querySelectorAll('.list>li>img')
					
			window.addEventListener('scroll',()=>{
				oImgs.forEach((item,index)=>{
					const itemTop = item.getBoundingClientRect().top
					if(itemTop<window.innerHeight){
						const data_src = item.getAttribute('data_src')
						item.setAttribute('src',data_src)
						console.log('我调用了')
					}
				})
			})
			
		</script>
	</body>
</html>