加载 DOM 后如何运行 jQuery 的后备副本？答案

【问题标题】：How can I run a fallback copy of jQuery after the DOM is loaded?加载 DOM 后如何运行 jQuery 的后备副本？
【发布时间】：2011-12-13 10:33:55
【问题描述】：

以下是我文档中 <script> 标记中的第一行代码，就在我的文档中结束 body 标记的上方（它指定在 Google 的 CDN 失败的情况下运行本地提供的 jQuery 副本）：

if(!window.jQuery){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/js/jquery.js';
    var scriptHook = document.getElementsByTagName('script')[0];
    scriptHook.parentNode.insertBefore(script, scriptHook);
}


jQuery(document).ready(function($){
// page behaviors
});

它确实执行成功，如果我的计算机没有连接到 Internet（这是一个本地服务的页面），则会插入 jQuery 的本地副本。但是，下面的document.ready() 部分不会执行。我猜这是因为它是在 jQuery 的后备副本生效之前调用的。以某种方式“延迟”其执行以使任一 jQuery 副本都能正常工作的正确做法是什么？

【问题讨论】：

stackoverflow.com/questions/538745/… 的可能重复项。
答案是您使用onload 事件和readystatechange 的组合。请参阅：ejeliot.com/blog/109。
查看那个问题，虽然解决方案可能相似，但问题却完全不同，恕我直言。
我们真的需要为谷歌失败的事件做计划吗？这就像为向上变成向下的可能性而设计......
@Sinetheta 一切都可能失败，包括 Google。虽然我不知道 AJAX API 的中断情况，但 Google 在其他服务上有很多中断。此外，您必须考虑网络中断的情况，即使远程服务器没有关闭，也无法访问。此外，对于开发来说，这很方便，可以在没有网络连接的情况下继续在火车或飞机上破解代码。

标签： javascript jquery cdn document-ready

【解决方案1】：

“我如何应对我的 CDN 失败并加载托管在我的服务器上的文件”的问题最近似乎出现了几次。

我要问的问题是，添加更多 js 是否是实现弹性的方法，以及 js 方法真正添加的弹性水平如何，例如如果 CDN 出现故障，它们将很快失败，但是如果 CDN 响应缓慢，这些方法的效果如何？

解决此问题的另一种方法是将其视为基础架构问题...

根据您拥有的域/子域运行 CDN。自动监控其可用性，当它失败时将 DNS 切换到备份服务器（任播也可以提供替代解决方案）

【讨论】：

【解决方案2】：

试试看

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script>
    jQuery(document).ready(function($){
        // page behaviors
    });
</script>

这样脚本标签会同步加载。

【讨论】：

【解决方案3】：

在调用jQuery 之前，您需要确保附加到 dom 的脚本已经完成加载。您可以使用described here 技术做到这一点：

if(!window.jQuery){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/js/jquery.js';
    script.onreadystatechange= function () {
      if (this.readyState == 'complete') jQueryLoaded();
    }
    script.onload = jQueryLoaded;
    var scriptHook = document.getElementsByTagName('script')[0];
    scriptHook.parentNode.insertBefore(script, scriptHook);
}

function jQueryLoaded() {  };

您还可以将 jQuery 内容作为 Ajax 请求获取，创建一个脚本标记，将这些内容作为脚本的主体并附加它。那也行。

【讨论】：

【解决方案4】：

php 解决方案是这样的：

$google_jquery = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
$fp = @fsockopen($google_jquery, 'r');
if (!$fp) 
{
    echo '<script type="text/javascript" src="js/jquery.js"></script>';
} 
else
{ 
    echo '<script src="'.$google_jquery.'"></script>' }
}

【讨论】：

你能解释一下第一行是做什么的吗？
但是，当脚本安装在服务器上时，服务器可能能够访问ajax.googleapis.com，而浏览器客户端可能无法访问，因为网络路径损坏。
那里有一点逻辑错误。它现在检查它是否可以连接到 google jquery 文件。
您仍然有逻辑错误来检查服务器上的连接而不是检查客户端。它会一直工作，直到一切都在本地主机上，但不是在生产中。
此解决方案在页面生成期间增加了往返 Google CDN 的延迟，这肯定会抵消使用 CDN 的好处。

【解决方案5】：

考虑使用现有的脚本加载器，例如yepnope。在主页上有一个您正在尝试执行的操作的示例。

【讨论】：