前端懒加载（简易版）

前端优化很经常的对图片的优化，当一个页面图片很多时初始化该页面同时 请求大量的图片资源导致性能低下

因此图片的懒加载被用来使用，

懒加载是指在满足条件的情况下才请求图片，可以逐步的请求避免大量的图片同时请求的情况

懒加载的思想是在浏览器可视区域时才加载图片

1.初始化时图片src属性置空

2.将src地址存储在自定义属性当中

3.当图片进入视野范围时将存储的值赋值到src中

简易代码如下：

;(function () {
    HTMLElement.prototype.getElementTop = function() {	//获取元素距离文档顶部的距离
        var top = this.offsetTop,
            cur = this.offsetParent;
        while (cur !== null){
            top += cur.offsetTop;
            cur = cur.offsetParent;
        }
        return top;
    };
    var img_top = [],			//当前页面图片元素距离文档顶部值的集合
        img_height = [],		//当前页面图片元素本身高度的集合
        layer_element = [];		//当前有懒加载标志元素集合
        element = document.getElementsByTagName("img"),
        view_height = document.documentElement.clientHeight;
    for (var i = 0;i < element.length;i++){
        if (element[i].getAttribute("data-src")){		//将有懒加载标志的元素挑出来
            layer_element.push(element[i]);
            img_top.push(element[i].getElementTop());
            img_height.push(element[i].offsetHeight);
        }
    }
    document.addEventListener("scroll",function () {	//滚动事件监听当前在视野范围的图片赋值src属性
        var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0;i < layer_element.length;i++) {
            if (!(scroll_top >= img_top[i] + img_height[i]) && !(scroll_top - 80 < img_top[i] - view_height)) {
                layer_element[i].src = layer_element[i].getAttribute("data-src");
            }
        }
    },false);
})();

使用时需要在<img></img>标签中附件“data-src”自定义属性，其值为该图片的src值即可使用