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动态追加页面数据以及事件委托详解
May 06 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
JQuery表单元素取值赋值方法总结
May 12 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python实时监控cpu小工具
2018/06/21 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
公司委托书范本5篇
2014/09/20 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
好员工观后感
2015/06/17 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
导游词之江西赣州
2019/10/15 职场文书