对于博客网站来说，图片加载慢是导致网站迟迟加载不完的罪魁祸首，本站实现了所有图片懒加载，这里分享下本站是如何实现的，整体过程也比较简单。本站教程基于Typecho，其它博客程序请自行研究，不过区别并不大。
我这里使用的 lazysizes.min.js 来实现懒加载。有必要简单介绍下LazySizes
LazySizes简介
LazySizes是一款终极而轻量级的懒加载库，专门用于处理响应式图片、iframe以及脚本等资源的延迟加载。其核心特性包括：
- 高性能：旨在提供极高的性能表现。
- 易于集成：只需在你的网页中加入JS文件，并对需懒加载的元素添加lazyload类即可。
- 自适应图片：全面支持响应式图片标准，如
标签和srcset属性。
主要功能亮点
- 自动优先级资源管理，区别对待关键和临近视口的元素，提高感知性能。
- 兼容性广泛，适用于各种前端框架和动态页面技术。
- 支持未来的响应式图片规范，无需额外配置。
- 提升SEO，不会影响搜索引擎抓取。
引入LazySizes
其它安装方式
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('暂无评论数据'); ?>"
>
全部评论 (57)