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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jquery仿微信聊天界面
May 06 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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中explode与split的区别介绍
2012/10/03 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python OpenCV获取视频的方法
2018/02/28 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
对Python 内建函数和保留字详解
2018/10/15 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
pip安装python库的方法总结
2019/08/02 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
学校教师安全责任书
2014/07/23 职场文书
2014年调度员工作总结
2014/11/19 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2015国庆节感想
2015/08/04 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Nginx的基本概念和原理
2022/03/21 Servers