Question

我有一个html页面和一个script，我想以特定的方式处理它：在它加载之后但在它执行之前。基本上我想预加载脚本，但在满足某些条件时执行。脚本不依赖于其他脚本，因此我将其设为非阻塞（async）：

<script onload='onScripLoad()' scr='...' async></script>

我想要的只是onload，但是在下载的脚本之前执行。有可能吗？

这里的问题是我能够预加载脚本但无法在我的应用生命周期中与所需的事件同步。 onScripLoad已执行after脚本已加载AND after已执行该脚本。我需要的是在执行脚本时进行控制（推迟执行）。

添加更多详细信息我想预加载脚本并在body中有某个元素可用时执行它但是我不能将脚本放在该元素之后，因为在这种情况下它会排队等一些其他元素正在head下载的资源。因此，我希望将我的脚本放在head中，使其成为async，一旦下载，只有在特定元素可用时才执行（或者事件在执行前创建该元素）。我不能让它不是异步的，因为它是一个我无法控制的脚本，不希望我的整个页面依赖它。

Answer 1

你可以在head部分加载外部脚本，将逻辑包装在一个函数中，然后在稍后的条件内调用该函数：

<强> externalscript.js：

function externalFunction(data) {
  console.log(data);
}

<强>索引：

<head>
  <script src='externalscript.js' async></script>
</head>
<body>
  <script>
  var body_data = 'test';
  if (timing-driven-condition) {
    externalFunction(body_data);
  }
  </script>
</body>

函数externalFunction将首先加载，但在条件调用之前不会被使用，让您可以控制它何时执行。

希望这有帮助！：）

在执行之前处理外部javascript脚本加载的事件

1 个答案: