对于博客网站来说，图片加载慢是导致网站迟迟加载不完的罪魁祸首，本站实现了所有图片懒加载，这里分享下本站是如何实现的，整体过程也比较简单。本站教程基于Typecho，其它博客程序请自行研究，不过区别并不大。

我这里使用的 lazysizes.min.js 来实现懒加载。有必要简单介绍下LazySizes

LazySizes简介

LazySizes是一款终极而轻量级的懒加载库，专门用于处理响应式图片、iframe以及脚本等资源的延迟加载。其核心特性包括：

• 高性能：旨在提供极高的性能表现。
• 易于集成：只需在你的网页中加入JS文件，并对需懒加载的元素添加lazyload类即可。
• 自适应图片：全面支持响应式图片标准，如标签和srcset属性。

主要功能亮点

• 自动优先级资源管理，区别对待关键和临近视口的元素，提高感知性能。
• 兼容性广泛，适用于各种前端框架和动态页面技术。
• 支持未来的响应式图片规范，无需额外配置。
• 提升SEO，不会影响搜索引擎抓取。

引入LazySizes

github下载地址

其它安装方式

npm install lazysizes --save
yarn add lazysizes --save

使用

使用上也比较简单，在需要使用的类上添加 lazyload 即可，比如我这里

<img class="comment-list-empty-img lazyload" 
     src="<?php $this->options->themeUrl('/static/images/null.svg'); ?>"
     data-src="<?php $this->options->themeUrl('/static/images/null.svg'); ?>"
     alt="<?php echo _t('暂无评论数据'); ?>"
>