使用jquery进行图片懒加载

对img和div的背景图片进行懒加载。
在data-original写入真正的链接。

// 注意: 需要引入jQuery
(function() {
    // 获取window的引用:
    var $window = $(window);
    // 获取包含data-src属性的img，并以jQuery对象存入数组:
    var lazyImgs = $('img[data-original]')
    var xxx=[]
    $('img[data-original],div[data-original]').each(function(index,element){
        xxx.push($(this))
    })
    //[].map($('img[data-src]').get(), function (i) {
        //return $(i);
    //});
    console.log(xxx)
    // 定义事件函数:
    var onScroll = function() {
        // 获取页面滚动的高度:
        var wtop = $window.scrollTop();
        // 判断是否还有未加载的img:
        if (xxx.length > 0) {
            // 获取可视区域高度:
            var wheight = $window.height();
            console.log(wheight)
            // 存放待删除的索引:
            var loadedIndex = [];
            // 循环处理数组的每个img元素:
            $.each(xxx, function (index, i) {
                console.log(i)
                // 判断是否在可视范围加200px内:
                if (i.offset().top - wtop < wheight + 200) {
                    if(i[0].tagName === 'IMG'){
                        i.attr('src', i.attr('data-original'));
                    }else if(i[0].tagName === 'DIV'){
                        i.css('background',"url(img/bmw_m1_hood.jpg)")
                    }
                    // 设置src属性:
                    i.attr('src', i.attr('data-original'));
                    // 添加到待删除数组:
                    loadedIndex.unshift(index);
                }
            });
            // 删除已处理的对象:
            $.each(loadedIndex, function (index) {
                xxx.splice(index, 1);
            });
        }
    };
    // 绑定事件:
    $window.scroll(onScroll);
    // 手动触发一次:
    onScroll();
})()

    (function() {
    var $window = $(window);
    var lazyImgs = $('img[data-original]')
    var xxx=[]
    $('img[data-original],div[data-original]').each(function(index,element){
        xxx.push($(this))
    })
    console.log(xxx)
    var onScroll = function() {
        var wtop = $window.scrollTop();
        if (xxx.length > 0) {
            var wheight = $window.height();
            var loadedIndex = [];
            $.each(xxx, function (index, i) {
                if (i.offset().top - wtop < wheight) {
                    if(i[0].tagName === 'IMG'){
                        i.attr('src', i.attr('data-original'));
                    }else if(i[0].tagName === 'DIV'){
                        console.log(i)
                        i.css("background-image","url("+i.attr('data-original')+')')
                    }
                    loadedIndex.unshift(index);
                }
            });
            $.each(loadedIndex, function (i,index) {
                xxx.splice(index, 1);
            });
        }
    };
    onScroll();
    $(window).scroll(onScroll);
})()