为包含参数的 script 标签添加延迟加载的实现方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

为包含参数的 script 标签添加延迟加载的实现方法

2025-10-19

浏览次数：次

返回列表

为包含参数的 script 标签添加延迟加载的实现方法

本文介绍如何为包含 async 属性和自定义 data 属性的 <script> 标签添加<a style="color:#f60; text-decoration:underline;" title= "延迟加载"href="https://www.php.cn/zt/37139.html" target="_blank">延迟加载效果。核心思路是移除 async 属性，并利用 setTimeout 函数在指定延迟后动态创建并插入 script 标签，从而实现延迟加载的目的。</script>

通常情况下，带有 async 属性的 <script> 标签一旦下载完成就会立即执行，而无需等待页面其他部分加载完毕。如果需要延迟加载这类 script，就不能依赖 async 属性。以下是如何实现这一目标的详细步骤：</script>

使用 setTimeout 函数延迟加载 Script

移除 async 属性： 首先，移除 <script> 标签中的 async 属性。这样可以防止脚本在下载完成后立即执行。</script>
使用 setTimeout 创建延迟： 使用 J*aScript 的 setTimeout 函数来延迟创建和插入 script 标签。

以下是具体的代码示例：

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

<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>
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 标签添加到元素的末尾。这会触发脚本的下载和执行。