如何在延迟的 Javascript 外部文件加载后执行 Javascript？

Question

我希望在页面加载完成后再加载外部JavaScript文件（如果这些外部资源无法加载，我也不想阻止呈现）。所以我有以下这行代码：

<script type="text/javascript" src=“//external.otherdomain.com/path/js/myresoures.js" defer></script>

然而，当这个文件最终加载时，我希望执行以下操作...

<script type="text/javascript">_satellite.pageBottom();</script>

然而，目前情况下，以上代码可能会在脚本加载之前运行。我应该如何才能在远程资源加载完成后再运行上述（或任何）Javascript代码？请记住，如果外部资源未加载（例如超时），我不希望运行Javascript代码。

谢谢，- Dave

- Dave

Answer 1

这可以通过一个onload函数实现。

您可以动态加载每个... 这个例子直接从MDN中提取。它将在调用importScript()脚本之前插入您的外部资源，然后在加载后启动回调。 sSrc = 您的外部脚本，fOnload = 回调函数。

function importScript (sSrc, fOnload) {
  var oScript = document.createElement("script");
  oScript.type = "text\/javascript";
  oScript.defer = true;
  if (fOnload) { oScript.onload = fOnload; }
      document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
  oScript.src = sSrc;
}

使用方法：

importScript("//external.otherdomain.com/path/js/myresoures.js", function () { _satellite.pageBottom(); });

如果可以使用jQuery，可以像这样使用.getScript()：

$.getScript( "//external.otherdomain.com/path/js/myresoures.js", function () {_satellite.pageBottom();} );

任何一种选项都可以在页面末尾的<script>中使用，就像他们说的那样，在“the fold”之后，确保整个DOM首先加载。

- Vinny M

---

jQuery的getScript方法不会将资源作为延迟加载。 - crenshaw-dev

Answer 2

您可以使用jQuery的$(window).load();

参见：http://api.jquery.com/load/

- BakGat