HTML-only conditional lazy loading (via preload and media)
4 months ago
- #HTML
- #Performance
- #LazyLoading
- 基于屏幕尺寸使用预加载和媒体查询实现图片条件性懒加载
- 为桌面端（最小宽度1024px）预加载图片以确保LCP的积极加载，而移动端忽略预加载并采用懒加载
- 示例实现使用HTTP Link头或<link rel='preload'>标签，后跟带loading='lazy'属性的<img>标签
- 在https://pccd.dites.cat网站的实际应用，针对桌面和移动端采用不同的封面图加载优化方案
- 注意事项包括缺乏官方文档、依赖预加载机制，以及Lighthouse工具无法完全识别该行为特征