jQuery实现图片懒加载

本文给出一种利用jQuery实现图片懒加载的原理。它的基本思想是：在输出HTML的时候，不要直接输出<img src="xxx"，而是输出如下的img标签：

<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
// 注意: 需要引入jQuery和underscore$(function() {    // 获取window的引用:    var $window = $(window);    // 获取包含data-src属性的img，并以jQuery对象存入数组:    var lazyImgs = _.map($('img[data-src]').get(), function (i) {        return $(i);    });    // 定义事件函数:    var onScroll = function() {        // 获取页面滚动的高度:        var wtop = $window.scrollTop();        // 判断是否还有未加载的img:        if (lazyImgs.length > 0) {            // 获取可视区域高度:            var wheight = $window.height();            // 存放待删除的索引:            var loadedIndex = [];            // 循环处理数组的每个img元素:            _.each(lazyImgs, function ($i, index) {                // 判断是否在可视范围内:                if ($i.offset().top - wtop < wheight) {                    // 设置src属性:                    $i.attr('src', $i.attr('data-src'));                    // 添加到待删除数组:                    loadedIndex.unshift(index);                }            });            // 删除已处理的对象:            _.each(loadedIndex, function (index) {                lazyImgs.splice(index, 1);            });        }    };    // 绑定事件:    $window.scroll(onScroll);    // 手动触发一次:    onScroll();
onScroll()函数最后要手动触发一次，因为页面显示时，并未触发scroll事件。如果图片已经在可视区域内，这些图片仍然是loading状态，需要手动触发一次，就可以正常显示。
如_.each报错，改成 $.each 后正常；