JS图片延时加载

 

 1 var imgs = document.body.querySelectorAll('img'), //获取所有图片  
 2     H = window.innerHeight; //浏览器高度
 3 window.onload = window.onscroll = function() {
 4     var S = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚过高度
 5     [].forEach.call(imgs, function(img) {
 6         if (!img.getAttribute('data-src')) {
 7             return;
 8         }
 9         if (H + S + 200 > getTop(img)) {
10             // getTop(img)获取图片距离页面顶部高度，H+S+200让图片提前加载。
11             img.src = img.getAttribute("data-src");
12             img.removeAttribute("data-src");
13         }
14     })
15 }
16 
17 function getTop(e) { //获取元素距离顶部高度方法。  
18     var T = e.offsetTop;
19     while (e = e.offsetParent) {
20         T += e.offsetTop;
21     }
22     return T;
23 }