网站优化之图片懒加载

作为一名前端，网站优化是非常重要的。很少网页会是没有图片的，尤其是做商城类的项目，那商品页面肯定会用到大量的图片，如果你一打开页面就加载该页面的所有图片那肯定会很慢，用户体验也是极差的。那这时候就需要用到图片懒加载的技术，这里说一下什么是图片懒加载以及如何进行懒加载

你可以随意打开一个没有做懒加载的页面，打开控制台观察network，你会发现当你浏览到该页面的时候会请求该页面的所有图片。

而懒加载图片就是只有在你的视野范围内的图片才会被加载出来，当你向下滚动的时候出现在你的视野中的图片才会被加载，这样就不会一次请求所有的图片，大大减轻服务器的压力

下面来看下具体实例

$(function(){
			lazy()
		})
			var img=document.querySelectorAll("img");
			var n=0;
			function lazy(){
				var clientHeight=document.documentElement.clientHeight;
				var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
				var totalHeight=clientHeight+scrollTop;
				console.log(totalHeight)
				for(var i=0;i<img.length;i++){
					if(img[i].offsetTop<totalHeight){
						if(img[i].getAttribute('src')==''){
							img[i].src=img[i].getAttribute('data-src')
						}
					}
					n=i+1;
					console.log('n='+n)
				}
			}
			window.οnscrοll=function(){
				lazy()
			}

说下关键点

1：document.documentElement.clientHeight;

这句是获取当前屏幕可见区域的高度

2：document.body.scrollTop||document.documentElement.scrollTop

这句是兼容性写法获取当前屏幕滚动条滚动的距离

3：img[i].offsetTop

这句是获取当前图片距离相对于当前窗口最顶端的距离

当前图片相对于窗口的最顶端的距离小于当前窗口可见区域的高度与滚动的高度之和时代表该图片进入你的视线，这时候就应该给该图片的src赋值，加载该图片，这就是图片懒加载的核心思想

下面看结果

这时候视野中有两张图片，看下面的network截图，也就只请求了两张

下面看滚动条下拉以后

这时候第三张图片出来，再看network,才请求第三张图片

好了~这就是图片懒加载，有什么不懂的欢迎留言~~~~~