简单的图片懒加载以及背景图懒加载

网上绝大多是图片懒加载插件都是针对img的src的，但是很多时候图片是以背景图的形式存在的，因为这种方式可以很容易实现图片不变形但是又保证宽高度固定，所以只能自己写一个。

这里只是简单的实现，没有考虑横向滚动、div滚动等等情况，但相信已经满足大部分情况了。

/**
 * 图片懒加载插件，与绝大多数同类插件不同的是，本插件同时支持img的src和div的背景图懒加载
 * 将图片以背景图的方式展示到div的好处是可以轻松实现图片不变形，所以背景图懒加载的需求还是比较常见的
 * 使用方法：将页面中展示图片的div或者img的图片地址以data-lazy-src="xxx"形式指定
 * 然后引入本JS即可，无需任何其他代码，支持动态生成内容的懒加载，但是每次动态增加内容之后需主动调用一句：
 * $(window).scroll();
 */

;(function($) {    //分号是避免在代码合并时和上一部分的代码合并后出错
    $(window).on('scroll resize load', function() {
        var notFoundCount = 0, maxNotFound = 2, screenHeight = $(window).height();
        $('[data-lazy-src]').each(function() {
            var pos = this.getBoundingClientRect();
            // 如果当前图片在视野上方，继续往下查找
            if(pos.bottom <= 0) return true;
            // 如果连续超过 maxNotFound 张图片都在视野下方，停止查找，注意只有从上到下的图片布局才能这样判断
            if(pos.top >= screenHeight) return (notFoundCount++) < maxNotFound;
            var src = $(this).attr('data-lazy-src');
            if(!src) return;
            if($(this).prop('tagName') === 'IMG') this.src = src;
            else $(this).css('background-image','url('+src+')');
            $(this).removeAttr('data-lazy-src');
        });
    });
})(jQuery);