jquery引入外部CDN 加载失败则引入本地jq库

由于第三方cdn库的盛行,很多朋友会选择使用第三方的类库,从学习上来说不建议大家都使用类库,这样我们失去了很多学习的机会,但使用上来说解决了很多代码兼容问题,这里都不多说了。

使用CDN加载jQuery类库一是可以省一点带宽,二是可以给用户带来更快的页面加载体验。

因为个人网站规模与cdn的带宽问题,现在cdn费用虽然下来了,但也有不给力的时候,很多朋友都会选择使用第三方的jquery库,个人推荐几个国内的 百度、新浪、bootcdn

下面的两段代码的作用 如果cdn的jquery没有加载进来,我们可以使用本地的类库。

jquery下载地址

第一种:推荐用法

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

上面,我们引用了百度 CDN的jQuery库,接着我们在脚本代码后添加了一个if语句来判断jQuery库是否加载成功,如果没有加载成功我们动态加载本地jQuery库。

其中,我们在document.write方法中直接使用了URL编码,把“<”编码为“%3C”,接着我们再使用unescape()方法把字符串还原过来。

我们通过unescape()方法把字符串转换回来,我们可以看到输出是一个正常的脚本引用代码。

现在,我们有一个疑问就是“为什么不使用常规字符,而是要使用字符编码呢?”,其实这是有原因的,这意味着我们代码将可以在XML、XHTML或HTML中正常运行,而无需把代码包含在CDATA中(具体请参考这里)。

第二种:

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

上面这种跟第一种原理是一样的,就是通过 || 运算符

表达式a || 表达式b : 计算表达式a(也可以是函数)的运算结果,

如果为 Fasle, 执行表达式b(或函数),并返回b的结果;

如果为 True,返回a的结果;

意思也是如果window.jQuery为false则加载本地的jquery库。

requireJs 引用cdn失败后加载本地js

问题:页面中引用js和css过多会导致页面加载变慢

                   引用cdn中的js和css会比直接在本地上传时间短

解决办法:我本地项目用到requireJs加载页面中的js和css,变为cdn加载时需要改动如下

1.jquery: [“https://cdn.bootcssddd.com/jquery/1.11.1/jquery.min”,”static/lib/jquery/jquery-1.9.1.min”],
2.增加build.js 代码如下

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

这篇文章就介绍到这了,后续网站那些事小编会为大家分享更多的资料。

原创文章,作者:SGQYX,如若转载,请注明出处:http://www.wangzhanshi.com/n/13191.html

(0)
SGQYX的头像SGQYX
上一篇 2025年1月1日 17:07:24
下一篇 2025年1月1日 17:07:26

相关推荐

  • CDN的基本含义以及使用

    网站那些事内容分发网络。其基本思路是避开互联网上可能影响数据传输速度和稳定性的瓶颈和链接,从而使内容传输更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一…

    2025年1月1日
  • cdn加速具体有哪几种方式

    与其他CDN服务商相比,网站那些事CDN的主要优势包括稳定快速、性价比高、简单易用、高效智能。比较多的用户会问到稳定快速这个优点,一般来说,网站那些事的CDN特点是分担源站压力,避…

    2025年1月2日
  • 电商网站使用cdn加速有什么优势

    1.提高网页加载速度 Diycdn全站加速服务实现了全网监控,调度精准, 节点丰富,实时动态优化访问线路,保障极致加速状态,有效提高页面加载速度,给用户良好购物体验。 2.稳定数据…

    CDN加速 2025年1月2日
  • 哪种情况下CDN不需要备案

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月1日
  • cdn自建可行吗

    网站那些事内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。网站那些事CDN…

    2025年1月1日
  • CDN概念

    与其他CDN服务商相比,网站那些事CDN的主要优势包括稳定快速、性价比高、简单易用、高效智能。比较多的用户会问到稳定快速这个优点,一般来说,网站那些事的CDN特点是分担源站压力,避…

    2025年1月1日
  • CDN的原理技术及使用方法是什么

    在IDC行业,我们经常听到一些关于CDN的相关名词,高防cdn,cdn加速服务器,cdn节点等等,那今天来跟着恒讯科技的小编来了解以下cdn是什么,cdn怎么使用。   …

    CDN加速 2025年1月1日
  • 香港服务器接入高防CDN有哪些好处

    近些年,香港云服务器租赁成为了行业关注热点。相对于国内服务器优点很多,比如免备案。网站那些事是排名比较靠前的几家云服务商之一。网站那些事致力于为客户提供广泛的网络主机选择,而且还通…

    CDN加速 2025年1月2日
  • 基于python怎么实现cdn日志文件导入mysql进行分析

    一、本文需求背景 周六日出现CDN大量请求,现需要分析其请求频次与来源,查询是否存在被攻击问题。 本文以阿里云CDN日志作为辅助查询数据,其它云平台大同小异。 系统提供的离线日志如…

    2025年1月1日
  • 十几万连接几M的流量,吓死“宝宝”了

        某局点升级(nginx变ats,同时去掉前端的nginx负载层),升级之后服务就不正常,硬生生的看着十几万连接,没有流量,各种排错,可谓是把心提到嗓子眼…

    2025年1月1日

发表回复

登录后才能评论