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>

Answer 2

你应该仔细考虑你的页面，以便它可以很好地降解。

在加载JS之前，以“裸”形式提供菜单，一旦它们出现，您就可以将UI更改为超级且充满了花里胡哨的声音：）

对于那些关闭JS的用户（可能不是很多，但仍然......）以及索引蜘蛛以捕获菜单内容的用户也会有用。

Answer 3

JS性能大师Steve Souders on JavaScript blocking and asynchronous loading给出了一个很好的概述。谷歌“异步javascript加载”获取更多信息。还有libraries可以安排和加载外部文件。 Another

如何从第三方脚本中分离页面加载？

3 个答案: