javascript - 如何将页面加载与第三方脚本分离？

Question

我遇到了这样的问题:在第三方脚本完成加载之前，页面的 UI 组件(例如下拉菜单)不可用。这会导致问题，因为谁知道这些服务器上发生了什么。我需要将页面交互组件的可用性与第三方内容的加载分离...

如何？

=/

Answer 1

尝试这样的事情:

<script type="text/javascript">
window.onload = function() {
  var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...];
  var head = document.getElementsByTagName('head')[0];
  for(var i = 0; i < scripts.length; ++i) {
    var scriptTag = document.createElement('script');
    scriptTag.src = scripts[i];
    head.appendChild(scriptTag);
  }
}
</script>

页面在客户端浏览器中完成加载后，这将加载到外部脚本文件中。您的表单 UI 元素应该全部可用。

如果您使用 jQuery，则可以执行以下操作:

<script type="text/javascript">
jQuery(function($){
    var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...];
    $.each(scripts, function(i,scrurl) {
      $('head').append($('<script>', { src: scrurl }));
    }
});
</script>