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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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编写PDF文档生成器
2006/10/09 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
python源文件的字符编码知识点详解
2021/03/04 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
放飞蜻蜓反思
2014/02/05 职场文书
个人合作协议书范本
2014/04/18 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js