web前端图片懒加载

图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一。而图片懒加载是web性能优化一个重要手段。

懒加载的原理

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

代码实现

js:

//  懒加载window.Echo = (function(window, document, undefined) {    'use strict';    var store = [],        offset, throttle, poll;    var _inView = function(el) {        var coords = el.getBoundingClientRect();        return((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));    };    var _pollImages = function() {        for(var i = store.length; i--;) {            var self = store[i];            if(_inView(self)) {                self.src = self.getAttribute('data-src');                store.splice(i, 1);            }        }    };    var _throttle = function() {        clearTimeout(poll);        poll = setTimeout(_pollImages, throttle);    };    var init = function(obj) {        var nodes = document.querySelectorAll('[data-src');        var opts = obj || {};        offset = opts.offset || 0;        throttle = opts.throttle || 250;        for(var i = 0; i < nodes.length; i++) {            store.push(nodes[i]);        }        _throttle();        if(document.addEventListener) {            window.addEventListener('scroll', _throttle, false);        } else {            window.attachEvent('onscroll', _throttle);        }    };    return {        init: init,        render: _throttle    };})(window, document);//  初始化Echo.init({        offset: 500,         throttle: 100 });

offset：当前页面可是区域距离图片高度
throttle：延时加载时间

html代码块：

<img alt="懒加载" data-src="images/index/delay_show.jpg"/>