一、为什么我们需要图片懒加载？

想象一下，你打开一个满是高清大图的网页，比如一个电商网站或者摄影图库。如果浏览器在打开页面的瞬间，就试图把所有图片，不管你看没看到，都一股脑儿地下载下来，会发生什么？页面加载会变得非常慢，白白消耗用户的手机流量，并且让电脑风扇呼呼作响。这就是“性能杀手”。

懒加载，顾名思义，就是一个“偷懒”的加载策略。它的核心思想非常简单：只加载用户当前能看到的图片，或者即将看到的图片。对于那些还在页面下方，用户根本没滚动到的图片，就先不加载。等用户滚动页面，图片快要进入视线范围时，再触发加载。这样一来，首屏加载速度飞快，用户体验和页面性能都得到了显著提升。

二、懒加载的基本原理与实现思路

要实现懒加载，我们需要解决两个关键问题：第一，如何判断一张图片是否进入了用户的视野？第二，如何控制图片的加载时机？

对于第一个问题，我们可以通过对比图片距离页面顶部的距离和用户已经滚动的高度来判断。简单来说，就是当“图片的顶部”快要接近“浏览器窗口的底部”时，我们就认为它应该被加载了。

第二个问题，我们可以通过修改图片的src属性来解决。在HTML中，我们不给<img>标签直接设置真实的图片地址，而是先把地址存到另一个自定义属性里，比如data-src。这样，浏览器就不会自动去加载它。当判断图片该加载了，我们再用jQuery把data-src的值赋给src属性，浏览器就会立刻开始下载并显示这张图片。

下面，我们来看一个最基础、最核心的实现示例。

技术栈：jQuery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基础懒加载示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .lazy-img {
            width: 100%;
            height: 500px;
            background-color: #f0f0f0;
            margin-bottom: 20px;
            display: block;
        }
    </style>
</head>
<body>
    <div style="height: 1000px;">这里是页面上方的内容，请向下滚动。</div>

    <!-- 懒加载图片：使用 data-src 存储真实地址，src 放一个占位图或留空 -->
    <img class="lazy-img" data-src="https://picsum.photos/800/500?image=1" src="" alt="图片1">
    <img class="lazy-img" data-src="https://picsum.photos/800/500?image=2" src="" alt="图片2">
    <img class="lazy-img" data-src="https://picsum.photos/800/500?image=3" src="" alt="图片3">
    <img class="lazy-img" data-src="https://picsum.photos/800/500?image=4" src="" alt="图片4">
    <div style="height: 1000px;">这里是页面下方的内容。</div>

    <script>
        $(document).ready(function() {
            // 定义一个函数，用来检查哪些图片需要加载
            function lazyLoad() {
                // 获取浏览器窗口的底部距离页面顶部的距离
                var windowBottom = $(window).scrollTop() + $(window).height();
                
                // 遍历所有带有 ‘lazy-img’ 类且尚未加载的图片
                $('.lazy-img').not('[data-loaded]').each(function() {
                    // 获取当前图片的顶部距离页面顶部的距离
                    var imageTop = $(this).offset().top;
                    
                    // 如果图片的顶部位置已经小于窗口底部位置（即图片已进入或即将进入视野）
                    // 这里增加一个100像素的预加载距离，让体验更平滑
                    if (imageTop < windowBottom + 100) {
                        // 获取真实的图片地址
                        var realSrc = $(this).data('src');
                        // 将真实地址赋给 src 属性，触发浏览器加载
                        $(this).attr('src', realSrc);
                        // 添加一个自定义属性标记已加载，避免重复处理
                        $(this).attr('data-loaded', true);
                        console.log('图片已加载：', realSrc);
                    }
                });
            }

            // 页面初始加载时执行一次，加载首屏图片
            lazyLoad();
            
            // 监听窗口的滚动事件，滚动时检查图片
            $(window).on('scroll', lazyLoad);
        });
    </script>
</body>
</html>

代码注释：这个示例展示了懒加载的核心逻辑。我们通过滚动事件和位置计算，动态地将 data-src 中的真实图片地址赋予 src，从而实现按需加载。data-loaded 属性用于防止对已加载图片进行重复操作。

三、进阶：实现响应式图片的懒加载

现在的网站都需要适配手机、平板、电脑等各种屏幕。我们经常使用响应式图片，即针对不同屏幕尺寸提供不同分辨率或裁剪的图片。常见的做法是使用 <picture> 元素或 srcset 属性。那么，如何让懒加载支持响应式图片呢？

关键在于，我们不能只替换一个 src 属性，对于 <picture> 元素，我们需要处理其内部的 <source> 标签；对于使用 srcset 的 <img>，我们需要替换 srcset 和 src（作为回退）。

技术栈：jQuery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式图片懒加载</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .responsive-lazy {
            width: 100%;
            height: auto;
            min-height: 300px;
            background-color: #eee;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div style="height: 800px;">滚动以加载响应式图片。</div>

    <!-- 示例1：使用 srcset 的 img 标签 -->
    <img class="responsive-lazy"
         data-srcset="https://picsum.photos/400/300?image=10 400w,
                      https://picsum.photos/800/600?image=10 800w,
                      https://picsum.photos/1200/900?image=10 1200w"
         data-src="https://picsum.photos/800/600?image=10" <!-- 默认/回退图片 -->
         sizes="(max-width: 600px) 400px,
                (max-width: 1200px) 800px,
                1200px"
         src="" <!-- 初始为空 -->
         alt="响应式图片示例">

    <!-- 示例2：使用 picture 元素 -->
    <picture class="responsive-lazy-container">
        <source media="(max-width: 799px)" data-srcset="https://picsum.photos/400/200?image=11">
        <source media="(min-width: 800px)" data-srcset="https://picsum.photos/1200/600?image=11">
        <img class="responsive-lazy" data-src="https://picsum.photos/800/400?image=11" src="" alt="Picture元素示例">
    </picture>

    <div style="height: 1000px;"></div>

    <script>
        $(document).ready(function() {
            function lazyLoadResponsive() {
                var windowBottom = $(window).scrollTop() + $(window).height();
                
                // 处理带有 srcset 的图片
                $('img.responsive-lazy[data-srcset]').not('[data-loaded]').each(function() {
                    var $img = $(this);
                    if ($img.offset().top < windowBottom + 200) {
                        $img.attr('srcset', $img.data('srcset')); // 加载 srcset
                        $img.attr('src', $img.data('src'));       // 加载回退 src
                        $img.attr('data-loaded', true);
                    }
                });
                
                // 处理 picture 元素
                $('picture.responsive-lazy-container').not('[data-loaded]').each(function() {
                    var $picture = $(this);
                    if ($picture.offset().top < windowBottom + 200) {
                        // 找到 picture 内的所有 source 和 img 标签
                        $picture.find('source').each(function() {
                            $(this).attr('srcset', $(this).data('srcset'));
                        });
                        var $img = $picture.find('img');
                        $img.attr('src', $img.data('src'));
                        $picture.attr('data-loaded', true); // 标记整个 picture 已加载
                    }
                });
            }

            lazyLoadResponsive();
            $(window).on('scroll', lazyLoadResponsive);
        });
    </script>
</body>
</html>

代码注释：这个示例扩展了基础懒加载，以支持现代响应式图片技术。对于 srcset，我们替换了 srcset 和 src 属性。对于 <picture> 元素，我们分别处理其子 <source> 的 srcset 和最终 <img> 的 src。这确保了浏览器能根据当前屏幕条件选择最合适的图片源进行加载。

四、性能优化与注意事项

实现基本功能后，我们还需要考虑一些细节，让懒加载更健壮、更高效。

  1. 函数节流（Throttle）：滚动事件触发非常频繁，如果每次滚动都执行检查函数，可能会造成不必要的性能损耗。我们可以使用节流技术，确保在指定时间间隔内只执行一次函数。

    // 简单的节流函数实现
function throttle(func, wait) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        if (!timeout) {
            timeout = setTimeout(function() {
                timeout = null;
                func.apply(context, args);
            }, wait);
        }
    };
}
// 使用节流后的滚动监听
$(window).on('scroll', throttle(lazyLoad, 200)); // 每200毫秒最多执行一次

  2. 图片加载失败处理：网络可能不稳定，图片可能会加载失败。为了提高用户体验，我们可以监听图片的 error 事件，并提供一个友好的占位图或提示。

    $img.on('error', function() {
    $(this).attr('src', '/path/to/error-placeholder.jpg');
    $(this).off('error'); // 移除事件监听，防止循环
});

  3. 占位符与布局稳定性：在图片加载前，页面布局会因为图片高度为0而突然跳动。最好的做法是使用CSS给图片容器一个固定的宽高比，或者使用一个与图片最终尺寸相同的纯色占位符。这涉及到“累积布局偏移（CLS）”的优化，对用户体验和SEO都很重要。

  4. SEO友好性：搜索引擎爬虫可能不会执行JavaScript。为了确保懒加载图片能被搜索引擎收录，可以考虑使用 <noscript> 标签提供兜底方案。

    <img class="lazy-img" data-src="real-image.jpg" src="placeholder.jpg" alt="描述">
<noscript>
    <img src="real-image.jpg" alt="描述">
</noscript>

五、应用场景与技术优缺点分析

应用场景：

  • 内容密集型网站：新闻门户、博客、论坛，文章内嵌大量图片。
  • 媒体展示网站：摄影社区、图库、艺术品网站。
  • 电商平台：商品列表页、详情页，通常有大量高质量产品图。
  • 社交应用：信息流中用户上传的图片和视频（视频懒加载原理类似）。

技术优点：

  • 大幅提升首屏加载速度：这是最核心的收益，直接改善用户体验和SEO评分。
  • 节省用户流量：对于移动端用户尤其友好。
  • 减轻服务器压力：无效或低频的图片请求减少。
  • 实现简单，兼容性好：核心逻辑不复杂，jQuery使其在旧浏览器上也能良好运行。

技术缺点与挑战：

  • 增加代码复杂度：需要处理滚动监听、位置计算、状态管理等。
  • 对SEO不友好（如果处理不当）：如前述，需要额外措施确保爬虫能抓取内容。
  • 可能影响用户体验：如果实现不当（如预加载距离太小），用户滚动时可能会看到图片“蹦出来”的加载过程。
  • 依赖于JavaScript：如果用户浏览器禁用了JS，则功能完全失效，必须有降级方案。

六、总结

通过jQuery实现图片懒加载，是一个成本相对较低但性能收益非常显著的前端优化手段。我们从最基础的滚动位置判断和src属性替换出发，逐步实现了对现代响应式图片技术的支持。在这个过程中，我们不仅要关注功能的实现，更要重视细节的打磨，比如使用函数节流来优化性能、处理图片加载错误、保持页面布局稳定以及兼顾SEO。

虽然现在有非常多优秀的第三方懒加载库（如 lozad.js, vanilla-lazyload 等），并且现代浏览器也正在原生支持懒加载（loading=“lazy”属性），但理解其底层原理仍然是前端开发者的宝贵财富。掌握了原理，你不仅能更好地使用这些高级工具和特性，还能在面对特殊业务场景时，有能力定制出最适合自己的解决方案。希望这篇文章能帮助你为自己的项目轻松加上“懒加载”这个性能加速器。