借助图片懒加载触发 JavaScript 动态导入

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

近年来 html 的最好改进之一是你可以添加到图像（也包括 iframe）的loading="lazy"属性，它将告诉浏览器直到图像出现在视口才加载图像。

<img src="/images/your-image.png" loading="lazy">

非常简单，非常实用。但如果你也能对脚本做同样的事情，那该多好。这样你就可以懒加载你的组件，只有当它们实际需要时才加载...

嗯，<img>元素还有另一个功能，就是使用onload和onerror属性在图像加载（或未加载）后运行脚本。

<img src="/images/your-image.png" loading="lazy" onload="() => console.log('image loaded')">

这个onload“回调”只有在图像加载时才会触发，如果图像是懒加载的，那么它只会在图像出现在视口时触发。噔噔噔！一个懒加载的脚本。

很遗憾，像这样它并没有什么用处。首先，你会在页面上出现一个不需要的图片，其次，你需要将想要运行的 javascript 内联化，这有点违背了懒加载的初衷。所以，让我们做一些改变来改进这一点。

图片本身可以是任何东西，或者，更重要的是，什么都没有。正如我之前提到的，有onerror回调，正如其名称所暗示的，当图片没有加载成功时会触发。

这并不意味着你需要将src指向一个不存在的图片，那样会导致控制台充满关于缺失图片的红色 404 错误，没有人想要这样。

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

<img src="data:," loading="lazy" onerror="() => console.log('image not loaded')">

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

好的，但我们仍然需要将想要运行的 javascript 内联，那么我们该如何修复这个问题呢？

既然 ES 模块支持几乎已经普及，我们可以使用非常强大的事件导入后默认 javascript 加载技术来在事件触发后加载脚本，如下所示：

<img src="data:," loading="lazy" onerror="import('/js/some-component.js').then(_ => _.default(this))">

注意：这也适用于onclick、onchange等事件。

注意：下划线只是访问模块的简写方式，你也可以写成.then(Module => Module.default(this))

好了，这里到底是怎么回事！？

首先让我们看看 some-component 可能的样子：

// some-component.js export default element => { element.outerHTML = ` <div class="whatever"> <p>Hello world!</p> </div> `;}

所以，你可能已经注意到，在onerror回调中，我将this作为参数传递给了默认导出。我这样做的原因（抱歉用词不当😁）是为了给调用它的脚本提供<img>，因为在当前（我又犯错了🤦）的上下文中this = <img>。

现在你可以简单地element.outerHTML替换损坏的图片为你自己的 HTML 标记，然后你就有了懒加载的脚本！😱

缓存和传递参数

如果，您在页面上多次使用此技术，那么您需要向data:,传递一个"缓存破坏"索引，或随机数，例如：

<img src="data:,abc123" loading="lazy" onerror="import('/js/some-component.js').then(_ => _.default(this))"><img src="data:,xyz789" loading="lazy" onerror="import('/js/some-other-component.js').then(_ => _.default(this))">

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

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

<img src="data:," loading="lazy" >由于我们将this传递给了函数，你可以像这样访问data属性：
export default element => { const { message } = element.dataset element.outerHTML = ` <div class="whatever"> <p>${message}</p> </div> `;}
往期推荐
Claude Code 算是被我玩明白了

Ant Design 6.0 来了！这一次它终于想通了什么？

15 个 Node.js 新功能替代流行 NPM 包


最后
欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...
点个在看
支持我吧