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

*Published:* 2023-08-25
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年8月25日，已超过 180天没有更新



网上绝大多是图片[懒加载](https://www.xarjtc.com/tag/%e6%87%92%e5%8a%a0%e8%bd%bd "查看懒加载此标签更多文章")插件都是针对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);
```