DEV Community
·
像图像一样懒加载脚本
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
HTML 的 `loading="lazy"` 属性可实现图像懒加载，`onerror` 回调和 ES 模块支持可用于脚本懒加载。通过设置无效 `src` 并在 `onerror` 中导入脚本，可以在事件触发后加载组件，避免控制台错误并替换破损图像。`data-` 属性可用于传递参数。
🎯
关键要点
-
HTML 的 loading='lazy' 属性可实现图像懒加载，延迟加载图像直到进入视口。
-
可以使用 onload 和 onerror 属性在图像加载后运行脚本，实现脚本的懒加载。
-
通过设置无效的 src 值，可以避免控制台错误并使用 onerror 回调加载脚本。
-
使用 data: 格式的图像可以避免控制台出现缺失图像的警告。
-
ES 模块支持几乎是通用的，可以在事件触发后加载脚本，使用 import 语法。
-
可以通过传递不同的缓存破坏索引来在页面上多次使用该技术。
-
可以使用 data- 属性在 HTML 中传递参数，并在脚本中访问这些参数。
❓
延伸问答
如何使用 loading='lazy' 属性实现图像懒加载？
通过在图像标签中添加 loading='lazy' 属性，浏览器会延迟加载图像，直到它进入视口。
如何在图像加载失败时执行脚本？
可以使用 onerror 属性，在图像加载失败时触发指定的脚本，例如导入其他 JavaScript 文件。
如何避免控制台出现缺失图像的警告？
可以使用 data: 格式的图像作为 src，这样可以避免控制台显示缺失图像的警告。
ES 模块如何支持懒加载脚本？
通过在 onerror 回调中使用 import 语法，可以在事件触发后加载 ES 模块脚本。
如何在懒加载中传递参数给脚本？
可以使用 data- 属性在 HTML 中传递参数，并在脚本中通过 element.dataset 访问这些参数。
懒加载脚本的缓存破坏索引是什么？
缓存破坏索引是一个随机数或字符串，用于确保每次加载的脚本都是新的，避免缓存问题。
➡️
