延迟加载脚本，例如图像

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

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

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

嗯，另一个特点是元素具有以下功能：在图像使用 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 模块支持几乎是普遍的，我们可以使用非常强大的 event-import-then-default javascript 加载技术在事件触发后加载脚本，如下所示：

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

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

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

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

// some-component.js

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

所以，您可能已经注意到，在 onerror 回调中，我将其作为参数传递给默认导出。我这样做的原因这个（请原谅双关语？）是为了给脚本提供 。调用它，因为在 this （我又做了一次？）上下文 this =

。

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

缓存和传递参数

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

    <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"
        data-message="hello world"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

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

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        <div class="whatever">
            <p>${message}</p>
        </div>
    `;
}

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

以上是延迟加载脚本，例如图像的详细内容。更多信息请关注PHP中文网其他相关文章！