运维咖啡吧
·
个人博客优化之图片懒加载探索
💡
原文中文，约2600字，阅读约需7分钟。
📝
内容提要
文章介绍了如何通过懒加载技术优化博客中的图片加载速度。使用HTML的loading属性（如loading="lazy"）可以优先加载可视区域内的图片，减少带宽浪费。作者通过自定义python-markdown扩展，自动为IMG标签添加loading属性，从而提升用户体验，解决历史文章中图片加载的问题。
🎯
关键要点
- 博客通过Markdown生成HTML并上传到Github，使用Netlify加速访问。
- 图片加载速度慢影响用户体验，尤其是游记中大量图片的加载。
- 懒加载技术可以优先加载可视区域内的图片，减少带宽浪费。
- HTML的loading属性（loading='lazy'）可以实现懒加载，浏览器会自动判断加载顺序。
- 使用python-markdown生成HTML时，默认IMG标签没有loading属性，可以通过自定义扩展自动添加。
- 自定义扩展类可以在生成HTML时自动为IMG标签添加loading属性，避免手动修改Markdown内容。
❓
延伸问答
什么是图片懒加载？
图片懒加载是一种优化技术，优先加载用户当前可视区域内的图片，其他图片在进入可视区域时再加载，从而提高加载速度和用户体验。
如何在HTML中实现懒加载？
在HTML中，可以通过在IMG标签中添加loading='lazy'属性来实现懒加载，浏览器会自动判断加载顺序。
使用python-markdown时如何自动添加loading属性？
可以通过自定义python-markdown扩展，编写一个类在生成HTML时自动为IMG标签添加loading属性，避免手动修改Markdown内容。
懒加载对用户体验有什么影响？
懒加载可以显著提高页面加载速度，减少用户等待时间，从而改善用户体验，特别是在图片较多的文章中。
懒加载的loading属性还有哪些配置？
除了lazy，loading属性还有eager（立即加载）和auto（根据浏览器策略加载），其中auto是默认值。
为什么需要优化博客中的图片加载速度？
优化图片加载速度可以减少带宽浪费，提高页面渲染速度，避免用户在等待加载时关闭网页，从而提升整体用户体验。
🏷️
标签
➡️
