运维咖啡吧
·
个人博客优化之图片懒加载探索
💡
原文中文，约2700字，阅读约需7分钟。
📝
内容提要
本文探索了个人博客优化中的图片懒加载方法，使用HTML元素的延迟加载属性loading来提高页面加载速度和用户体验。还介绍了通过python-markdown工具生成HTML文件时添加loading属性的方法，并提供了自定义扩展类的示例。通过使用自定义扩展类，可以自动在IMG标签上添加loading属性，无需修改markdown内容。
🎯
关键要点
- 本文探讨了个人博客优化中的图片懒加载方法。
- 使用HTML元素的延迟加载属性loading可以提高页面加载速度和用户体验。
- 图片懒加载可以优先加载用户当前可视区域的图片，减少带宽浪费。
- 从Chrome浏览器76版本开始，IMG和IFRAME支持原生懒加载特性，使用loading='lazy'语法。
- python-markdown工具生成的HTML文件默认不包含loading属性。
- 可以通过python-markdown的内置扩展为IMG标签添加loading属性。
- 使用自定义扩展类可以自动在IMG标签上添加loading属性，无需修改markdown内容。
➡️
