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图片放大镜效果
Jun 23 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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
一个查看session内容的函数
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JS的get和set使用示例
2014/02/20 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python任务调度实例分析
2015/05/19 Python
python发送邮件功能实现代码
2016/07/15 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python实现交并比IOU教程
2020/04/16 Python
Python如何读写字节数据
2020/08/05 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
迎八一活动主题
2014/01/31 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
安全生产责任书范本
2014/04/15 职场文书
中秋晚会活动方案
2014/08/31 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python
python数字图像处理:图像简单滤波
2022/06/28 Python