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

在这篇文章中，我们将学习如何在CDN失败时加载我们的本地jQuery文件。首先，为什么我们应该使用CDN，如果有机会失败。使用CDN而不是本地jQuery文件有很多好处。

使用CDN的一些优势如下。

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

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

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

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

<!DOCTYPE html>
<html>
    
<head>
    <!-- jQuery library -->
    <script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
</head>
  
<body>
    <script>
        if(typeof jQuery == 'undefined'){
            document.write("CDN fails")
        }
        else{
            document.write("CDN loaded")
        }
    </script>
</body>
    
</html>

输出:

CDN loaded

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

CDN fails

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

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

<script src="jquery-3.6.0.js"></script>

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

<!DOCTYPE html>
<html>
    
<head>
    <!-- jQuery library -->
    <script src="jquery-3.6.0.js"></script>
</head>
    
<body>
    <script>
        if(typeof jQuery == 'undefined'){
            document.write("CDN fails")
        }
        else{
            document.write("CDN loaded")
        }
    </script>
</body>
  
</html>

输出:

CDN loaded

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

编写以下几行代码，当CDN失败时，它将从机器上添加jQuery。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script>window.jQuery || document.write(‘<script src=”jquery-3.6.0.js”><\/script>’)</script>

我们正试图从CDN加载jQuery。如果CDN失败了，那么 “jQuery “变量将是未定义的。

在第二行，我们将检查 “jQuery “变量是否未定义，如果未定义，意味着CDN没有加载，那么我们将从本地机器上加载jQuery文件。

示例:

<!DOCTYPE html>
<html>
    
<head>
    <!-- jQuery library -->
    <script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script>
window.jQuery || document.write('<script src="jquery-3.6.0.js"><\/script>')
    </script>;
</head>
    
<body>
    <script>
        $().ready(function(){
            document.write("Hey Geeks");
        })
    </script>
</body>
  
</html>