How to introduce the local jq library when jquery imports external CDN and fails to load

This article mainly introduces the loading of third-party CDN by the website. If the jQuery library is unsuccessful, the local jquery implementation code will be loaded. Friends in need can refer to it

Due to the prevalence of third-party cdn libraries, many Friends will choose to use third-party class libraries. From a learning point of view, it is not recommended for everyone to use class libraries. In this way, we lose a lot of learning opportunities, but in terms of use, it solves many code compatibility problems, which I won’t go into here.

Using CDN to load the jQuery class library can save some bandwidth, and can give users a faster page loading experience.

Because of the problem of personal website scale and CDN bandwidth, although CDN costs have come down now, there are times when it is not enough. Many friends will choose to use third-party jquery libraries. I personally recommend several domestic Baidu and Sina , bootcdn

The role of the following two pieces of code is that if the jquery of cdn is not loaded, we can use the local class library.

jquery download address

First: Recommended usage

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 if (typeof jQuery == &#39;undefined&#39;) {
 document.write(unescape("%3Cscript src=&#39;/skin/mobile/js/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E"));
 }
</script>

Above, we quoted The jQuery library of Baidu CDN is obtained, and then we add an if statement after the script code to determine whether the jQuery library is loaded successfully. If it is not loaded successfully, we dynamically load the local jQuery library.

Among them, we directly use URL encoding in the document.write method, encoding "<" into "<", and then we use the unescape() method to restore the string.

We convert the string back through the unescape() method, and we can see that the output is a normal script reference code.

Now, we have a question: "Why not use regular characters, but use character encoding?" In fact, there is a reason for this, which means that our code will be able to be used in XML, XHTML or HTML It can run normally without including the code in CDATA (please refer here for details).

The second type:

<script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape("%3Cscript src=&#39;/skin/mobile/js/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E"))</script>

The above principle is the same as the first one, that is, through | | Operator

Expression a || Expression b: Calculate the result of expression a (it can also be a function),

If it is Fasle, execute expression b (or function) , and returns the result of b;

If it is True, returns the result of a;

means that if window.jQuery is false, the local jquery library will be loaded.

requireJs Loading local js after failing to reference cdn

Problem: Too many references to js and css in the page will cause the page to load slowly

     Refer to cdn The js and css in the requireJs loading page will take less time than uploading directly locally.

Solution: My local project uses the js and css in the requireJs loading page. When it is changed to cdn loading, it needs to be changed as follows

1.jquery: ["https://cdn.bootcssddd.com/jquery/1.11.1/jquery.min","static/lib/jquery/jquery-1.9.1.min"],
2. Add The build.js code is as follows

({
  baseUrl: "/js",
  paths: {
    "jquery": "empty:"
    
  },
  dir: "/js-build",
  optimize: "uglify",
  optimizeCss: "standard.keepLines",
  mainConfigFile: "config.js",//config.js为1中引用的文件
  removeCombined: true,
})

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The switch button function implemented by jquery.onoff

About jQuery for dynamically adding and deleting data in forms Operation

The above is the detailed content of How to introduce the local jq library when jquery imports external CDN and fails to load. For more information, please follow other related articles on the PHP Chinese website!