<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> img{ width: 500px; height: 500px; display: block; } </style> </head> <body> <div class = "box"> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> <img asrc = "img/2.jpg" src="" alt="img1"/> </div> </body> <script type="text/javascript"> (function(){ function tagName(tagName){ return document.getElementsByTagName(tagName); }function addEvent(obj,type,func){ if(obj.addEventListener){ obj.addEventListener(type,func,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,func); } } var v = { eleGroup:null, eleTop:null, eleHeight:null, screenHeight:null, limitHeight:null } function init(element){ v.eleGroup = document.getElementsByTagName(element); v.screenHeight = document.documentElement.clientHeight; var len = v.eleGroup.length; for(var i = 0;i < len; i++){ if(v.eleGroup[i].offsetTop<v.screenHeight&&v.eleGroup[i].getAttribute("asrc")){ v.eleGroup[i].setAttribute("src",v.eleGroup[i].getAttribute("asrc")); v.eleGroup[i].removeAttribute("asrc"); } } } function lazyload(){ v.limitHeight = document.documentElement.scrollTop || document.body.scrollTop + document.documentElement.clientHeight; var len = v.eleGroup.length; for(var j = 0 ;j < len; j++){ if(v.eleGroup[j].offsetTop <= v.limitHeight&&v.eleGroup[j].getAttribute("asrc")){ v.eleGroup[j].setAttribute("src",v.eleGroup[j].getAttribute("asrc")); v.eleGroup[j].removeAttribute("asrc"); } } } init("img"); addEvent(window,"scroll",lazyload); })() </script> </html>
我们知道了浏览器加载img是很耗费资源的，还有带宽，而且还有一个特点就是如果没有设置img的src属性，就不会消耗这些资源，所以我们用到的加载的方法就是首先将所有img的src置空，然后自定义一个asrc属性，这里放的是实际的src，当我们需要加载这张图片时就可以获取img的这个属性，并将其值赋值给src，实现图片的加载。
思路：首先在当前可视化的区域加载图片,首先需要获取浏览器的高度，然后查询每个元素相对浏览器顶部距离，然后加载满足：相对浏览器顶部的距离小于浏览器高度的图片，实现对可视化区域的初始化填充。
真正实现懒加载的原理是：获取当前元素距离浏览器顶部的高度，与浏览器+scroll卷到上面的高度相比较，如果前者小于后者就代表轮到这张图片显示了！就把它加载出来。
ps：需要注意的地方
addEventListener VS attachEvent
前者兼容主流浏览器，后者兼容ie（ie6及更高级版本兼容，低于ie6未测试）
document.documentElement VS document.body
ie默认的box-sizing为border-box不会将html识别为盒模型，所以用document.documentElement就获取不到clientHeight scrollHeight等值。所以使用
document.documentElement.scrollTop || document.body.scrollTop
可以解决兼容性问题