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>中使用，正如他们所说的那样 the fold ，确保首先加载整个DOM。

Answer 2

怎么回事？： https://varvy.com/pagespeed/defer-loading-javascript.html

哦，我的身体没有足够的角色

Answer 3

您可以使用jQuery＆＃39; $(window).load();

请参阅：http://api.jquery.com/load/

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

3 个答案: