js实现懒加载

javascript实现懒加载

懒加载在各大网页中用处越来越多，在不用懒加载的情况下，一个网页需要加载数百张照片，导致服务器压力很大，不仅影响网页的加载速度，还会影响带宽。
这个时候我们就需要懒加载来提高用户体验，并且减轻服务器压力，从而提高性能。
它的实现机制是优先加载可视区域的内容，其他部分等进入了可视区域再加载。

再具体点用代码实现的角度来说，就是：
1、创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。

思路和步骤：
1、首先在html页面创建多个img标签，img的src中存放的是一张大小为1 * 1px的图片路径，也就是我们通常见到的正在加载中的图片，然后创建一个自定义属性data-src，在里面存放真正需要显示的图片路径
2、在js代码中，首先获取到所有的img，方便以后进行循环
3、定义一个获取自身到网页顶部高度的方法，这个方法用于后面代码的简化
4、定义懒加载方法（重头戏）
（1）获取可视区高度和滚动区高度
（2）如果图片距离网页的顶部的高度小于可视区高度和滚动区高度值和，则开始进行图片加载准备
（3）设置定时器，每2s钟执行一次。在定时器内创建一个临时图片（不上传在页面），将真实图片赋给临时图片的src，用于进行隐形加载。当临时图片加载完成，就可以将真实图片赋给img的src，这样就实现了懒加载。

window.onload=function(){
	//获取html页面中所有的img
	var imgs=document.querySelectorAll('img');
	//定义一个获取自身到网页顶部高度的方法
	function getTop(e){
		return e.offsetTop;
	}
	//定义懒加载方法
	function lazyLoad(imgs){
		//获取可视区高度
		var h=window.innerHeight;
		//获取滚动区高度
		var s=document.documentElement.scrollTop || document.body.scrollTop;
		for(var i=0;i<imgs.length;i++){
			//如果图片距离网页顶部的高度小于可视区高度和滚动区高度之和
			if(getTop(imgs[i])<(h+s)){
				//这里定义了一个有一个形参（第一个i）的空的匿名函数，然后以第二个i为实参进行调用。
				(function(i){
					// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
					setTimeout(function(){
						//创建一个临时图片，这个图片在内存中不会到页面上去，实现隐形加载
						//Image 对象代表嵌入的图像。
						var temp=new Image();
						temp.src=imgs[i].getAttribute('data-src')
						// onload判断图片加载完毕，再赋值给dom节点
						temp.onload=function(){
							//用真图片替换假图片
							imgs[i].src=imgs[i].getAttribute('data-src')
						}
					},2000)
				})(i)
			}
		}
	}
	lazyLoad(imgs);
	//滚屏函数
	window.onscroll=function(){
		lazyLoad(imgs);
	}
}

其中，在获取图片到页面顶部的高度时，我定义了一个getTop()方法，在方法内部使用的是一个offsetTop属性，那么这个offsetTop属性和style.top有什么区别呢？

offsetTop和style.top的区别：
1、offsetTop返回的时一个数值，而style.top返回的是一个字符串，除了数字之外还带有单位px
2、offsetTop属性是只读属性，而style.top属性可读写
3、若没有在样式中给指定元素定义top值，那么style.top返回的则是空字符串

同理offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height也如上

再附上一些干货：Javascript中制作滚动代码的常用属性
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;