DEV Community
·
像图像一样懒加载脚本
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
HTML 的 `loading="lazy"` 属性可实现图像懒加载，`onerror` 回调和 ES 模块支持可用于脚本懒加载。通过设置无效 `src` 并在 `onerror` 中导入脚本，可以在事件触发后加载组件，避免控制台错误并替换破损图像。`data-` 属性可用于传递参数。
🎯
关键要点
- HTML 的 loading='lazy' 属性可实现图像懒加载，延迟加载图像直到进入视口。
- 可以使用 onload 和 onerror 属性在图像加载后运行脚本，实现脚本的懒加载。
- 通过设置无效的 src 值，可以避免控制台错误并使用 onerror 回调加载脚本。
- 使用 data: 格式的图像可以避免控制台出现缺失图像的警告。
- ES 模块支持几乎是通用的，可以在事件触发后加载脚本，使用 import 语法。
- 可以通过传递不同的缓存破坏索引来在页面上多次使用该技术。
- 可以使用 data- 属性在 HTML 中传递参数，并在脚本中访问这些参数。
➡️
