本文介绍如何为包含 async 属性和自定义 data 属性的 <script> 标签添加延迟加载效果。核心思路是移除 async 属性，并利用 setTimeout 函数在指定延迟后动态创建并插入 script 标签，从而实现延迟加载的目的。
通常情况下，带有 async 属性的 <script> 标签一旦下载完成就会立即执行，而无需等待页面其他部分加载完毕。 如果需要延迟加载这类 script，就不能依赖 async 属性。以下是如何实现这一目标的详细步骤：
使用 setTimeout 函数延迟加载 Script
移除 async 属性： 首先，移除 <script> 标签中的 async 属性。 这样可以防止脚本在下载完成后立即执行。
使用 setTimeout 创建延迟： 使用 JavaScript 的 setTimeout 函数来延迟创建和插入 script 标签。
以下是具体的代码示例：
<script>
setTimeout(function() {
var script = document.createElement('script');
script.src = "https://s.widgetwhats.com/wwwa.js";
script.setAttribute('data-wwwa', '1');
document.body.appendChild(script);
}, 2000); // 延迟 2 秒 (2000 毫秒)
</script>代码解释：
- setTimeout(function() { ... }, 2000);： 这行代码设置了一个定时器，在 2000 毫秒（2 秒）后执行指定的函数。
- var script = document.createElement('script');： 创建一个新的 <script> 元素。
- script.src = "https://s.widgetwhats.com/wwwa.js";： 设置 script 标签的 src 属性，指向要加载的脚本 URL。
- script.setAttribute('data-wwwa', '1');： 设置 script 标签的 data-wwwa 属性。 这里使用了 setAttribute 方法，可以方便地添加任意自定义属性。
- document.body.appendChild(script);： 将新创建的 script 标签添加到 <body> 元素的末尾。 这会触发脚本的下载和执行。
注意事项：
- 延迟时间： setTimeout 函数的第二个参数是以毫秒为单位的延迟时间。 根据实际需求调整这个值。
- 放置位置： 将这段代码放在 HTML 文档的 <body> 标签的末尾，或者在 <head> 标签中使用 defer 属性。 这样可以确保在页面内容加载完成后再执行延迟加载的脚本。
- 错误处理： 在实际应用中，可以添加错误处理机制，例如检查脚本是否成功加载，或者在加载失败时进行重试。
- 动态属性： 如果需要动态设置多个属性，可以重复使用 script.setAttribute() 方法。
总结：
通过移除 async 属性并使用 setTimeout 函数，可以有效地延迟加载包含参数的 script 标签，从而优化页面加载性能，提升用户体验。 这种方法灵活可控，适用于各种需要延迟加载脚本的场景。
