相信大家都使用过CDN静态资源库,比如下面

  staticfile CDN:http://staticfile.org   (由国内优秀的云存储服务商七牛云提供存储和加速赞助)

  BootCDN:https://www.bootcdn.cn/  (Bootstrap中文网支持并维护的前端开源项目免费 CDN 服务)

  CDN官方静态资源库:https://cdnjs.com/

  

  使用CDN可以减少带宽和http请求,也可以减少一些服务器的压力,从而提升页面加载速度,用户体验也会更好。

  但有一个问题:假如你使用的是百度静态资源库。

  某天,突然百度静态资源库崩了,那你网站引用的相应资源文件也会失效。这个时候应该怎么办呢?

  虽然这种情况几率比较小,但为了防范于未然,我们还是需要留一手。

  然后我就开始百度方法,真是五花八门,各种写法都有,看的我是很蒙蔽

  有这种:

<script src="//ajax.google/jquery/1.9.2.js"></script>
<script>window.jQuery||document.write('<script src="jquery-1.9.2.js"></script>')</script>

  有这种:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>

  

  有这种:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>
<script>
  //<![CDATA[
if(typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
} //]]>
</script>

  不知为何,总觉得以上写法哪里不对,但又说不出个所以然。后经过一番寻找,终于找到了比较规范和正确的2种方法

  方法一(推荐)

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
  document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js'%3E%3C/script%3E"));
}
</script>

  方法二

<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'%3E%3C/script%3E"))</script>

  注:经本人实际测试,2种方法都可以。

  然后这里我又有一个疑问:不知道上面代码中的 %3C 和 %3E是什么意思?

  后来先查了 unescape()这个函数  , 接着又查了这个函数escape() 

  

  结果发现 %3C 和 %3E分别表示 '<'  和  '>',如下图

  

  

  原文参考:https://www.jb51.net/article/140694.htm

引入外部 CDN失效时--怎么加载本地资源文件(本文以jquery为例)的更多相关文章

  1. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  2. 填补Resources和WWW加载本地资源的坑

    总的来说Resources和WWW加载本地资源坑比较多,大多与路径有关. 下面代码构成了一个路径的预读模块: 此模块主要解决的坑是:Resources或WWW加载本地的文件夹中的多个文件时,无法获取文 ...

  3. 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件

    使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...

  4. iOS webView 远程html加载本地资源

    昨天,一个朋友让我帮他在IOS上弄这样一件事情: webView 调用远程URL,并且让远程的web 通过自定义标签能实现内嵌本地的图片.js 或音频等. 比如:在服务器端 的html文件中 这样写到 ...

  5. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  6. iOS WebView 加载本地资源(图片,文件等)

    https://www.cnblogs.com/dhui69/p/5596917.html iOS WebView 加载本地资源(图片,文件等) NSString *path = [[NSBundle ...

  7. Mysql加载本地CSV文件

    Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...

  8. UIWebView加载本地html文件

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...

  9. WebView加载本地Html文件并实现点击效果

    Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...

随机推荐

  1. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

  2. pytesser3 使用说明

    需要环境 Python3.x以上 需要安装PIL以及tesseract-ocr引擎.点我下载tesseract-ocr引擎 如何使用 1. pip install pytesser3 如图:   [可 ...

  3. ubuntu16.04如何安装搜狗输入法

    1 . 首先我们需要先来下载支持linux版本的搜狗输入法安装包,这里我们先查看下自己的ubuntu系统是什么版本的,这里我们可以在右上角的那个齿轮图标点击查看"系统设置",在里面 ...

  4. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  5. 【最小生成树+子集枚举】Uva1151 Buy or Build

    Description 平面上有n个点(1<=N<=1000),你的任务是让所有n个点连通,为此,你可以新建一些边,费用等于两个端点的欧几里得距离的平方. 另外还有q(0<=q< ...

  6. appium+python+eclipse 自动化测试框架构建!

    经过几天的慢慢研究,现将所需用的自动化框架进行了构建,在后期的代码编写中,直接在框架中套用编写对应的module.case等即可,以此来简化测试方式,提高代码的编写效率与规范 基本的架构设计流程图,如 ...

  7. pyspark列合并为一行

    将 dataframe 利用 pyspark 列合并为一行,类似于 sql 的 GROUP_CONCAT 函数.例如如下 dataframe : +----+---+ | s| d| +----+-- ...

  8. python接口自动化(二十)--token登录(详解)

    简介 为了验证用户登录情况以及减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮.有些登录不是用 cookie 来验证的,是用 token 参数来判断是否登录.token 传参有两种一种是放在请 ...

  9. 一致性 Hash 算法的实际应用

    前言 记得一年前分享过一篇<一致性 Hash 算法分析>,当时只是分析了这个算法的实现原理.解决了什么问题等. 但没有实际实现一个这样的算法,毕竟要加深印象还得自己撸一遍,于是本次就当前的 ...

  10. Spring Boot 中关于自定义异常处理的套路!

    在 Spring Boot 项目中 ,异常统一处理,可以使用 Spring 中 @ControllerAdvice 来统一处理,也可以自己来定义异常处理方案.Spring Boot 中,对异常的处理有 ...