javascript - 如何仅在延迟的 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。

谢谢，-戴夫

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> 中使用在页面末尾，正如他们所说，在折叠之后，确保首先加载整个 DOM。