js实现懒加载

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/csdnluolei/article/details/83933065

当一个页面有很多数据的时候,需要全部加载后,才显示,网速不好时需要等很久。当用懒加载后,就只加载可视区的数据,反应更快,效果更好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js Learning -懒加载</title>
		<style type="text/css">
			#box{
				width:80%;
				margin:0 auto;
			}
			#box li{
				list-style: none;
				width:180px;
				height:250px;
				border: 1px solid black;
				float:left;
				margin-left: 20px;
				margin-top: 20px;
			}
			#box img{
				width:100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<div id='box'>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
			<li><img alt="懒加载" _src="img/1.png"/></li>
		</div>
	</body>
	<script type="text/javascript">
		//获取所有图片
		var aImage = document.getElementsByTagName('img');
		//获取可视区高度
		var height = document.documentElement.clientHeight;
			
		//当滚动时触发
		window.onload = window.onscroll = function(){
			//得到滚动卷起高度
			var scrollTop = document.documentElement.scrollTop;
			//遍历所有图片
			for(var i = 0 ; i < aImage.length ; i++ ){
				//获取该图片举例网页顶部和可视区高度,判断是否显示
				//距网页顶部高度
				var top = aImage[i].offsetTop;
				console.log('scrollTop='+scrollTop);
				console.log(top +"<="+ height + scrollTop);
				if(top <=  height + scrollTop){
					aImage[i].src = aImage[i].getAttribute('_src');
				}
			}
			
		};

	</script>
</html>
展开阅读全文

没有更多推荐了,返回首页