当我们打开一个页面时，浏览器就会从上往下读取页面中的<img>标签src中的地址，并且开启线程来进行加载。
倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，试问谁会一直耐心的等待着页面的加载？另一方面，加载每个图片都要向服务器发送请求，这会增大服务器的压力。
针对这种情况，就需要运用懒加载技术：先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。1.这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。2.减少了同一时间发向服务器的请求数，服务器压力剧减。
那么我们是如何进行懒加载的呢？
我所使用的方法：在写网页<img>标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性eg：_src。将路径放入这个自定义的属性中。那么在加载页面时，这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时，将_src中的路径赋值给src属性，并开始加载。
HTML 约定
我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。
代码如下：
function getFixed(obj){
//获取非行间属性
function getStyle(obj,styleName){
if (obj.currentStyle){
return obj.currentStyle[styleName];//ie下获取某个元素的样式
}
else{
return getComputedStyle(obj,null)[styleName];//chrom下获取某个元素的样式
}
}
//要获取图片相对网页顶部的距离，但图片有被定位的父级
var iLeft=0;
var iTop=0;
var oParent=obj;
while(oParent){//循环
if (oParent.tagName=="HTML"){//一直到当前元素的父为html停止循环
break;
}
iLeft+=oParent.offsetLeft;//计算图片基于父元素的左边位移，
iTop+=oParent.offsetTop;//计算图片基于父元素的顶部位移
if (oParent!=obj){
iLeft+=parseInt(getStyle(oParent,"borderWidth"));//offsetLeft不包括边框，因此要把边框加上
iTop+=parseInt(getStyle(oParent,"borderWidth"));
}
oParent=oParent.offsetParent;//让当前元素等于他的已经被定为的父级元素，然后继续开始循环。，从而让循环开始，计算出图片基于html根元素的位移距离。
}
return [iLeft,iTop];//当 break 后itop就是图片相对网页顶部的距离
}
window.onload=window.onscroll=function (){
var aImg=document.getElementsByTagName("img");
var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var scrollBottom=bodyScrollTop+document.documentElement.clientHeight;
for (var i=0; i<aImg.length; i++){
if (getFixed(aImg[i])[1]<=scrollBottom){//此时说明这图片已经在可视区域内，应该开始加载了
aImg[i].src=aImg[i].getAttribute("_src");
}
}
}