懒加载作为一种提升性能，优化的手段已经在web开发中广泛应用，那么到底什么是懒加载它又是基于什么原理实现的呢？

懒加载说的直白点就是先做一部分事情，剩下的事情等到需要做的时候再做。

我们这里说说在前端开发中用的比较多的图片懒加载技术，所谓图片懒加载就是页面刷新的时候只是请求视图之前的图片资源，对于之后的图片资源等到他在视图范围内之后再进行加载，这样子较少了很多http请求，很好的web应用程序的性能。

那么如何做图片懒加载呢？

实现原理：

1、对于img标签，只要将图片地址赋给src属性，浏览器解析的时候就会自动去请求图片地址所指向的资源，浏览器的这个机制我们是没办法改变的，那么我们只能在src属性上做文章，在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src，src属性留空。

2、设置一个定时器定时检测出现在视图内的图片，并将其data-src属性的值赋值给src属性。（其实这个地方也可以通过事件来检测）

原生js的实现：

var imgs = document.getElementsByTagName("img");
function lazyload(){
	var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
	var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	for(var i=0,len=imgs.length;i<len;i++){ var x = scrollTop + viewportSize - imgs[i].offsetTop; if(x>0){
			imgs[i].src = imgs[i].getAttribute("loadpic");
		}
	}
}
setInterval(lazyload,1000);

jQuery的实现：

$(function(){
	var viewportSize = $(window).height();
	var lazyload = function(){
		var scrollTop = $(window).scrollTop();
		$("img").each(function(){
			var _this = $(this);
			var x = viewportSize + scrollTop + _this.position().top;
			if(x>0){
				_this.attr("src",_this.attr("loadpic"));
			}
		})
	}
	setInterval(lazyload,1000);
})

当然这个只是一个实现原理，如果真的用在生产环境，还是使用lazyload吧，这样子出现bug的几率比较小。