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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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实现验证码功能
2006/10/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JS之小练习代码
2008/10/12 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js控制table合并具体实现
2014/02/20 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
weblogic面试题
2016/03/07 面试题
旅游管理专业大学生职业规划书
2014/02/27 职场文书
政府法律服务方案
2014/06/14 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
redis实现排行榜功能
2021/05/24 Redis