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 Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery AJAX应用实例总结
May 19 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数据过滤的方法
2013/10/30 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python程序中设置HTTP代理
2016/11/06 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
小学生打架检讨书
2014/01/26 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
班主任新年寄语
2014/04/04 职场文书
工作会议方案
2014/05/21 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
公司辞职信模板
2015/05/13 职场文书
爱护环境建议书
2015/09/14 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL