给网站添点“懒”：使用LazySizes实现图片懒加载

前言

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

几年过去，网站从建站初期的“裸奔”状态一路走来，如同为一个毛坯房精装修，我也在这漫长时光里陆陆续续给它添置了安全防护、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=&