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 08 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery中event.target和this的区别详解
Aug 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
转PHP手册及PHP编程标准
2006/12/17 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Python解释执行原理分析
2014/08/22 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python中字符串内置函数的用法总结
2018/09/13 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
在python中画正态分布图像的实例
2019/07/08 Python
使用python模拟命令行终端的示例
2019/08/13 Python
pytorch 共享参数的示例
2019/08/17 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python 写一个水果忍者游戏
2021/01/13 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
什么是会话Bean
2015/05/14 面试题
护理专业的自荐信
2013/10/22 职场文书
生活部的活动方案
2014/08/19 职场文书
校长创先争优承诺书
2014/08/30 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Redis 常见使用场景
2021/08/30 Redis