⚠️ 本文已超过 180 天未更新，部分内容可能具有时效性，请注意核实最新情况。

前言

作为一个个人网站维护者，说实话是有点惭愧的。小站断断续续的维持了几年，一直有个小毛病没治——图片懒加载。

几年过去，网站从建站初期的“裸奔”状态一路走来，如同为一个毛坯房精装修，我也在这漫长时光里陆陆续续给它添置了安全防护、CDN、缓存加载、增删代码......只为让它更安全、更顺手！（最近挨打了，大部分江苏地段IPV6）

懒加载的方案五花八门，找来找去最后盯上了Github上的一个开源项目LazySizes。为啥是这个？说白了就是图个省心！Github Start目前17.7k，可以一试。

介绍：

lazysizes是一款快速（无卡顿）、SEO友好且自动初始化的懒加载器，适用于图片（包括响应式图片的picture/srcset）、iframe、脚本/小部件等。它通过区分可见元素和近视元素来优先处理资源，从而使得感知性能更加快速。

它也可能成为您集成响应式图片的首选工具。它可以自动计算响应式图片的大小属性，允许您将媒体查询与CSS中的媒体属性共享，有助于将布局（CSS）与内容/结构（HTML）分离，并且使得将响应式图片集成到任何环境中变得非常简单。它还包括一系列可选插件，以进一步扩展其功能。

方法

闲话少叙，以下是教程部分：

此教程针对Typecho网站，原理都一样。简单来说就是引入lazysizes.min.js文件，再向img标签添加一些类。

第一步：Github下载lazysizes.min.js文件并在网站head或者body中引入

<script src="lazysizes.min.js" async=""></script>

或者 | 请“神”进门：最省事当然是用CDN，使用提供的链接==（仅举例两个。有条件者建议本地引入）==
cdnjs | 字节跳动公共库

//Cdnjs链接：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async=""></script>
//字节跳动公共库：
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lazysizes/5.3.2/lazysizes.min.js" async=""></script>

第二步：修改属性

只要是在 <img alt="" title="" src=""> 中添加 class="lazyload"> 、data-sizes="auto" 、data-sizes="auto"，src修改为data-src即可。

data-sizes="auto"是为了自动检测图片尺寸，这种自动大小功能直接包含在 lazyIzes 中。 如果图像的宽度超过，则自动大小计算将采用图像的宽度（另请参阅选项）。如果它低于阈值，它会向上遍历 DOM 树，直到找到结束的父级并使用此数字。防止页面闪烁，自行体验。

这才是关键。lazysizes 的“暗号”是：看到 class="lazyload" 且 src 属性被换成 data-src 的图片，就知道该“懒”着了。

文章里的图片怎么办？ Typecho 默认输出的 <img> 标签是长这样：<img src="图片地址" ...>。我们需要把它变成 <img data-src="图片地址" class="lazyload" data-sizes="auto" src="占位图" ...>。

这活儿得在主题的 functions.php 里干。

由于我将网站修改了部分代码，所以贴出更符合Typecho原版的通用方法：

functions.php 代码添加以下内容：

// 为文章内容中的图片添加 lazyload 类、data-src 和 data-sizes="auto"
function addLazyloadToImages($content, $widget, $lastResult) {
    // 确保 $content 是字符串
    if (!is_string($content)) {
        return $content;
    }

    // 在文章页与独立页面应用
    if ($widget instanceof Widget_Archive && $widget->is('single')) {
        // 使用正则表达式为所有 <img> 标签添加 data-src、data-sizes="auto" 和 class="lazyload"
        // 处理已经有 lazyload 类且有 src 属性的 img 标签 (确保 class 中有 lazyload)
        $content = preg_replace('/<img(?=[^>]*src=[\'"]([^\'"]*)[\'"])([^>]*)class=([\'"])([^\'"]*lazyload[^\'"]*)\3([^>]*)>/i', '<img$2data-src="$1" data-sizes="auto" class=$3$4$3$5>', $content);
        // 处理已有 class 但没有 lazyload 类且有 src 属性的 img 标签
        $content = preg_replace('/<img(?=[^>]*src=[\'"]([^\'"]*)[\'"])([^>]*)class=([\'"])([^\'"]*)\3([^>]*)>/i', '<img$2data-src="$1" data-sizes="auto" class=$3$4 lazyload$3$5>', $content);
        // 处理没有 class 属性且有 src 属性的 img 标签
        $content = preg_replace('/<img(?=[^>]*src=[\'"]([^\'"]*)[\'"])([^>]*?)(?<!class=)>/i', '<img$2data-src="$1" data-sizes="auto" class="lazyload">', $content);

        // 移除原始的 src 属性
        $content = preg_replace('/(<img[^>]*?)\s+src=([\'"][^\'"]*[\'"])/i', '$1', $content);
    }

    return $content;
}

// 将函数绑定到 'content' 钩子
Typecho_Plugin::factory('Widget_Abstract_Contents')->contentEx = 'addLazyloadToImages';

若仅在文章页（post）或独立页面（page）有效，修改以下代码：

//原代码
if ($widget instanceof Widget_Archive && $widget->is('single')) {
//修改后代码
if ($widget instanceof Widget_Archive && $widget->is('single') && $widget->type === 'post') {

解释：

$widget->type这个属性存储了当前内容的类型。

• 对于文章，$widget->type 的值是 'post'。
• 对于独立页面，$widget->type 的值是 'page'。
• && $widget->type === 'post'：这个附加条件确保了只有当内容类型是 'post' 时，懒加载的处理才会执行。

第三步：验证

清下缓存，刷新页面，慢慢往下划，打开浏览器开发者工具的 Network 面板，你会看到，只有进入视口的图片才开始加载，没看到的都“安安静静”地挂着 data-src。心里那点“浪费”的感觉，总算踏实了。

浏览器控制台查看img代码：

<img alt="do.webp" title="do.webp" data-src="https://XXX/1.webp" data-sizes="auto" class="lazyautosizes lazyloaded" sizes="765px" src="https://XXX/1.webp">

当你看到一个元素的类从 class="lazyautosizes" 变为 class="lazyautosizes lazyloaded"，这实际上反映了 lazysizes 库的工作机制。当使用 lazysizes 进行图片或其他资源（如iframe）的懒加载时，它会在这些元素被成功加载后自动添加 lazyloaded 类。

后话

至此已完结

具体详解可查看 Github开源 | 演示页面 | 【SEO工具】lazysizes-CSDN博客

有兴趣的不妨现在就动手试试。LazySizes 的确还不错。让加载“懒”一点，等待少一点，何乐而不为？