【JavaScript】图片懒加载_img标签的lazysrc-CSDN博客

本文链接：https://blog.csdn.net/floracuu/article/details/78423144

图片懒加载指的是不直接给src赋值，当图片需要显示的时候才被赋值

（比如当页面滚动时只加载当前能看到的图片，看不到的部分未加载，当页面向上滚动时，下面的图片才加载出来）

这种方式不会影响图片的显示,同时最大程度上减少服务器端的资源耗用，使网页更加流畅。

一般大型网站，图片比较多，会使用图片懒加载。

步骤：
1.给图片自定义一个属性，保存真正图片地址，src先给一张占位图（占位图一般只有一张）
2.当滚动页面，图片到达可视区，再给src赋真正地址，并且删除自定义属性

如下图：网页页面不断向上滚动，当图片A到达图片B的位置时，马上要进入到用户可视区，此时将图片的真正地址赋给src,变为真正要显示的图片，此时，sTop+cHeight=offsetT,（offsetT是图片距离页面顶部的距离）由于滚动时，sTop+cHeight或许不会刚好等于offsetT，所以当sTop+cHeight>=offsetT时，修改src

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			#box{
				width:500px; 
				margin:auto;
			}
			#box li{
				height:300px;
				border:5px solid red;
				margin-bottom:250px; 
			}
			#box li img{
				width:100%;
				height:100%;
			}
		</style>
	</head>
	<body> 
		<div id="box">
			<ul>
				<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/2.jpg"/></li>
				<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/3.jpg"/></li>
				<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/4.jpg"/></li>
				<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/5.jpg"/></li>
				<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/6.jpg"/></li>
				<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/7.jpg"/></li>
			</ul>
		</div> 
		<script>
			 
			 
			//滚上去的距离+页面可视区的高度>=图片距离页面顶部的距离
			//获取DOM对象--所有li元素的集合
			var lists=document.querySelectorAll("#box li");

			window.onscroll=function(){//监听页面滚动，页面滚动则触发此方法
				//滚出去的距离
				var sTop=getScrollTop();
				//页面可视区的高度
				var cHeight=getClientHeight()

				
				for(var i=0;i<lists.length;i++){
					//图片距离页面顶部的距离
					var offsetT=getOffsetTop(lists[i]);

					//获取到lazy-src的属性值，即图片的真正地址
					var imgObj=lists[i].children[0];
					var la_src=imgObj.getAttribute("lazy-src");//标签内自定义属性只能通过get/setAttribute()
 
					//进入可视区，并且src没有被修改过（修改过的lazy-src已经被删除了，保存的是null）
					if(sTop+cHeight>=offsetT&&la_src){
						//修改src 
						imgObj.src=la_src;
						//删除lazy-src属性
						imgObj.removeAttribute("lazy-src");
						
					}
				}

			}
			
			//滚出去的距离（兼容谷歌和火狐）
		 	function getScrollTop(){
		  		return document.body.scrollTop||document.documentElement.scrollTop;
		  	}
		    	//获取可视区域高度
		  	function getClientHeight(){
		  		return window.innerHeight||document.documentElement.clientHeight;
		  	}
		  	//获取元素到顶部的距离
		  	function getOffsetTop(ele){
				var top=0;
				//当ele是body的时候就可以跳出去了（因为body没有偏移父元素）
				while(ele.offsetParent!=null){
					top+=ele.offsetTop+ele.offsetParent.clientTop;
					ele=ele.offsetParent;
				}
				return top;
			}
		</script>
	</body>
</html>