<!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
可以解決兼容性問題