图片懒加载

延时加载概念和原理

正常网页页面结构：头部CSS样式和少量JS；中间部分是内容，包括图片、视频、文本等；底部主要JS文件。浏览器打开网页时这些资源按顺序从前到后逐一加载。而大多页面都无法一屏显示完全，如果初次打开页面时让浏览器只加载可视区域的图片，不加载当前不可见图片，就可以把下载看不见图片的时间用来下载页面后面的js等内容，大大提高页面访问速度。当鼠标像下滚动浏览器时，再按需加载出现在可视区的图片。

图片延时加载的实现

<img src="/loading.gif" data-src="/images/001.png"> 初始状态下让图片的默认src为空或者指向一个小尺寸图片，设置data-src属性存储图片真实路径。需要显示图片时用data-src属性值替换掉默认的src值。下图详解了如何判断何时加载图片。

1. 浏览器可视区域高度H，通常是固定的(这里不考虑手动调整窗口大小)window.innerHeight可取得此值。 
2. 图片距离页面顶端的距离T，也是固定值可用offsetTop方法计算。 
3. 浏览器滚动条滚过高度S，这是唯一变化的值document.documentElement.scrollTop||document.body.scrollTop计算。

当 H + S > T 时该图片出现在可视区域

 

原生JS图片延时加载

var imgs = document.body.querySelectorAll('img'),    //获取所有图片  
    H = window.innerHeight;     //浏览器高度
window.onload = window.onscroll = function(){  
    var S = document.documentElement.scrollTop||document.body.scrollTop;   //滚动条滚过高度
    [].forEach.call(imgs,function(img){
         if(!img.getAttribute('data-src')){return}
         if(H + S + 200 > getTop(img)){
// getTop(img)获取图片距离页面顶部高度，H+S+200让图片提前加载。
             img.src=img.getAttribute("data-src");
             img.removeAttribute("data-src");
         }
        })
}

function getTop(e){     //获取元素距离顶部高度方法。  
    var T = e.offsetTop;
    while(e = e.offsetParent ){
        T += e.offsetTop
}
    return T
}