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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 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中使用Oracle数据库(4)
2006/10/09 PHP
php基础知识:类与对象(1)
2006/12/13 PHP
php 静态化实现代码
2009/03/20 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
asp.net和php的区别点总结
2019/10/10 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue.js获取数据库数据实例代码
2017/05/26 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
Python之web模板应用
2017/12/26 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python安装requests库的实例代码
2019/06/25 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python print不能立即打印的解决方式
2020/02/19 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
高二美术教学反思
2014/01/14 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL