图片懒加载

资料来源：https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000

 

它的基本思想是：在输出HTML的时候，不要直接输出<img src="xxx"，而是输出如下的img标签：

<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">

因此，页面显示的图片是一个gif加载动画。当页面滚动时，如果图片出现在屏幕中，就利用jQuery把<img>的src属性替换为data-src的内容，浏览器就会实时加载。

 

JavaScript代码如下：

<script type="text/javascript">
// 注意: 需要引入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();
})
</script>