近年来对 html 的最佳改进之一是 loading="lazy" 属性，您可以将其添加到图像（也包括 iframe）中，该属性将告诉浏览器不要加载图像直到出现在视口中。

非常简单，非常有用。但如果您也可以对脚本执行此操作，那就太好了。这样你就可以延迟加载你的组件，只有当它们确实需要时......

嗯， 元素的另一项功能是能够在图像使用 onload 和 onerror 属性加载（或不加载）之后运行脚本。

console.log('图像已加载')" >

此 onload“回调”仅在加载图像时才会触发，如果图像是延迟加载的，则仅当图像位于视口中时才会触发。瞧！延迟加载的脚本。

不幸的是，像这样，它没有多大用处。首先，您的页面上会出现不需要的图像，其次，您需要内联要运行的 JavaScript，这有点违背了延迟加载的目的。因此，让我们做出一些改变来改进这一点。

图像本身可以是任何东西，或者更重要的是，什么都不是。正如我之前提到的，有一个 onerror 回调，顾名思义，当图像

不加载时，它将触发。

这并不意味着您需要将 src 指向不存在的图像，这会导致控制台充满关于丢失图像的红色 404 错误，并且没有人希望这样。

如果 src 图像实际上不是图像，也会触发 onerror 回调，最简单的方法是使用 data: 格式“错误地编码”图像。这还有一个好处，就是不会在控制台中填充丢失图像的警告？

console.log('图像未加载')" >

这仍然会导致页面出现“损坏的图像”缩略图，但我们会解决这个问题。

好吧，但是我们仍然需要内联我们想要运行的 javascript，那么我们如何解决这个问题？

好吧，现在 ES 模块支持几乎是普遍的，我们可以使用非常强大的

event-import-then-default javascript 加载技术在事件触发后加载脚本，如下所示：

_.default(this))" >

注意：这也适用于 onclick、onchange 等事件
注意：下划线只是访问模块的简写方式，你也可以写 .then(Module => Module.default(this))

好吧，那么这是怎么回事！？

首先让我们看一下某些组件可能是什么样子：

// 一些组件.js 导出默认元素=> { 元素.outerHTML = ` `; }

因此，您可能已经注意到，在 onerror 回调中，我将其作为参数传递给默认导出。我这样做的原因是

this （请原谅双关语？）是为了给脚本调用它的 ，因为在 this （我又做了一次？）上下文 this = .

现在您可以简单地使用 element.outerHTML 用您的 html 标记替换损坏的图像，然后您就拥有了延迟加载的脚本！ ？

缓存和传递参数

如果您在一个页面上多次使用此技术，那么您需要向数据传递“缓存清除”索引或随机数：例如，类似：

_.default(this))" > _.default(this))" >

“:,”后面的字符串可以是任何内容，只要它们不同即可。

将参数传递给函数的一个非常简单的方法是在 html 中使用 data-something 属性，如下所示：

_.default(this))" >

由于我们将 this 传递给函数，您可以像这样访问数据属性：

导出默认元素=> { const { 消息 } = element.dataset 元素.outerHTML = ` `; }

请在评论中告诉我您的想法！ ❤️