DEV Community
·
像图像一样懒加载脚本
内容提要
HTML 的 `loading="lazy"` 属性可实现图像懒加载，`onerror` 回调和 ES 模块支持可用于脚本懒加载。通过设置无效 `src` 并在 `onerror` 中导入脚本，可以在事件触发后加载组件，避免控制台错误并替换破损图像。`data-` 属性可用于传递参数。
关键要点
-
HTML 的 loading='lazy' 属性可实现图像懒加载，延迟加载图像直到进入视口。
-
可以使用 onload 和 onerror 属性在图像加载后运行脚本，实现脚本的懒加载。
-
通过设置无效的 src 值，可以避免控制台错误并使用 onerror 回调加载脚本。
-
使用 data: 格式的图像可以避免控制台出现缺失图像的警告。
-
ES 模块支持几乎是通用的，可以在事件触发后加载脚本，使用 import 语法。
-
可以通过传递不同的缓存破坏索引来在页面上多次使用该技术。
-
可以使用 data- 属性在 HTML 中传递参数，并在脚本中访问这些参数。
延伸解读
懒加载的优势
使用 `loading='lazy'` 属性可以显著提高网页性能，尤其是在图像和脚本较多的情况下。懒加载确保只有当用户滚动到视口时，相关资源才会被加载，从而减少初始加载时间和带宽消耗。
避免控制台错误
通过设置无效的 `src` 值并使用 `onerror` 回调，可以有效避免控制台中出现的404错误。这种方法不仅能保持控制台的整洁，还能在图像未加载时执行必要的脚本，提升用户体验。
ES模块的灵活性
随着ES模块的广泛支持，开发者可以在事件触发后动态加载脚本。这种方式使得代码更加模块化，便于维护和重用，同时也能根据需要加载特定功能，优化页面性能。
延伸问答
如何使用 loading='lazy' 属性实现图像懒加载？
通过在图像标签中添加 loading='lazy' 属性，浏览器会延迟加载图像，直到它进入视口。
如何在图像加载失败时执行脚本？
可以使用 onerror 属性，在图像加载失败时触发指定的脚本，例如导入其他 JavaScript 文件。
如何避免控制台出现缺失图像的警告？
可以使用 data: 格式的图像作为 src，这样可以避免控制台显示缺失图像的警告。
ES 模块如何支持懒加载脚本？
通过在 onerror 回调中使用 import 语法，可以在事件触发后加载 ES 模块脚本。
如何在懒加载中传递参数给脚本？
可以使用 data- 属性在 HTML 中传递参数，并在脚本中通过 element.dataset 访问这些参数。
懒加载脚本的缓存破坏索引是什么？
缓存破坏索引是一个随机数或字符串，用于确保每次加载的脚本都是新的，避免缓存问题。
