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加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery实现拖拽小方块效果
Dec 10 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
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
js重写方法的简单实现
2016/07/10 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
python传递参数方式小结
2015/04/17 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
实时获取Python的print输出流方法
2019/01/07 Python
python多线程同步之文件读写控制
2021/02/25 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
零基础学python应该从哪里入手
2020/08/11 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
如何用python 操作zookeeper
2020/12/28 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
会计系个人求职信范文分享
2013/12/20 职场文书
投诉书范文
2015/07/02 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python