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


Posted in jQuery onMay 23, 2018

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

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

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

下面的两段代码的作用 如果cdn的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,
})

这篇文章就介绍到这了,后续三水点靠木小编会为大家分享更多的资料。

jQuery 相关文章推荐
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
20个最常见的jQuery面试问题及答案
May 23 #jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
jQuery获取随机颜色的实例代码
May 21 #jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php递归json类实例
2014/12/02 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
党的群众教育实践活动实施方案
2014/06/12 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Python读写yaml文件
2022/03/20 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
springboot实现string转json json里面带数组
2022/06/16 Java/Android