CDN失败时如何在本地加载jQuery？

在本文中，我们将学习如何在 CDN 失败时加载我们的本地 jQuery 文件。首先，如果有可能失败，我们为什么要使用 CDN。使用 CDN 而不是本地 jQuery 文件有很多优点。

使用 CDN 的一些优点如下。

• 它减少了我们服务器的负载。
• jQuery 框架从这些 CDN 加载速度更快，因此它节省了我们的带宽。

CDN 失败的机会很少。但这并不意味着它永远不会失败。所以我们必须考虑到它。

如何检查我们的 CDN 脚本是否正确加载？

我们可以通过检查脚本加载后应该存在的任何变量或函数的类型来检查我们的 CDN 脚本是否已加载。如果我们得到类型“未定义”，则意味着我们的 CDN 失败。

输出：

CDN loaded

如果我们只是从 CDN 中删除任何字母，那么我们的 CDN 将不会加载，它会给出输出：

CDN fails

CDN失败时如何在本地加载jQuery？

首先，让我们看看如何从本地机器链接 jQuery。首先，我们将从 jQuery 网站下载 jQuery 库文件，然后将其包含在我们的 HTML 代码中，如下所示。

从本地机器加载 jQuery 的代码：

HTML

    

    
    

    

    
        if(typeof jQuery == 'undefined'){
            document.write("CDN fails")
        }
        else{
            document.write("CDN loaded")
        }
    

  

输出：

CDN loaded

注意：使用下载的 jQuery 文件的完整路径。在我的例子中，HTML 和 jQuery 文件都在同一个文件夹中。现在，我们将了解如何加载本地 jQuery，以防我们的 CDN 失败。

编写以下代码行，CDN失败时会从本机添加jQuery。

我们正在尝试从 CDN 加载 jQuery。如果 CDN 失败，则“jQuery”变量将未定义。

在第二行中，我们将检查“jQuery”变量是否未定义，如果未定义，则表示 CDN 未加载，然后我们将从本地计算机加载 jQuery 文件。

例子：

HTML

    

    
    
    
    
window.jQuery || document.write('<script src="jquery-3.6.0.js"><\/script>')
    ;

    

    
        $().ready(function(){
            document.write("Hey Geeks");
        })
    

  

输出：

Hey Geeks

我们总是会得到这个输出，即使我们的 CDN 失败了。由于我们正在处理如果我们的 CDN 失败的情况，请从我们的机器添加 jQuery 文件。