简单检测CDN链接是否有效
2024-09-24 21:13:46
CDN链接经常是使用的。但是,CDN链接挂了怎么办,因此,就要调用使用本站点的库,那么怎么实现呢?
检测CDN的jquery链接是否有效(这种方法比较简单)
<script src="" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
那么,问题来了,假如我要检测其他CDN呢?如使用bootstrap框架的js与css呢?
本人就想了一个比较简单的方法(同步方式)
...
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
... <script>
//判断cdn是否有效
$.when(
//同步方式发送请求
$.ajax({
url: "https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css",
async: false
}),
$.ajax({
url: "https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js",
async: false
})
//如果链接失效,就写入本地的链接
).fail(function() {
$("link[href='https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css']").after(" < link rel = 'stylesheet' href = 'css/bootstrap.min.css' > ");
$("script[src='https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js'").after(" < script type = 'text/javascript' src = 'js/bootstrap.min.js' > < \/script>");
});
</script>
使用requirejs加载(异步方式)
<!doctype html>
<html>
<head>
<title>requirejs</title>
<meta charset="utf-8">
<script data-main="js/main" src="js/require.js"></script>
</head>
<body>
<span>requirejs</span>
</body>
</html>
main.js
require.config({
paths: {
//配置cdn与本地jq
jquery: ['http://cdn.bootcss.com/jquery/2.0.0/jquery.min', 'jquery-2.0.0.min'],
},
map: {
//这个是require-css插件,即css.min.js
'*': {
'css': 'css.min'
}
},
}); require(['jquery'], function($) {
alert("jquery load");
});
//引入的写法是插件写法,直接在这里写路径
require(['css!../css/a.css'], function() {
alert('stylesheet load');
});
a.css
span{
font-weight:bold ;
}
PS:学习了一下requirejs这个库,原理是动态生成<script>标签,这个库比较适合管理引入过多的js库,可以提高web前端页面性能。(使用css就要引用require-css插件)
如果引入js(或者css)比较少的话,就不必使用这个库了。
最新文章
- ASP.NET Core Web API Cassandra CRUD 操作
- 【JS】字符串操作
- Storm的ack机制在项目应用中的坑
- Android 传感器
- atitit。ocr框架类库大全 attilax总结
- 十种MySQL报错注入
- Java_内存管理String and Array
- css实现阴影效果(box-shadow)
- Qt之课外实践——文件操作(简单清道夫)
- {";集合已修改;可能无法执行枚举操作。";}
- POJ3579 Median
- Flume Spooldir 源的一些问题
- 解决java switch……case不能匹配字符串的问题
- minicom installation and configuration on ubuntu
- 对static静态成员的理解
- linux安装配置solr
- kNN算法个人理解
- 第48篇 说说.Net与Java中的字符串
- Windows下安装tesserocr
- 海思uboot启动流程详细分析(三)【转】
热门文章
- PHP中调用SVN命令更新网站方法(解决文件名包含中文更新失败的问题)
- HDU 3592 World Exhibition (差分约束,spfa,水)
- ActiveX、OLE和COM/DCOM
- UVA10410 TreeReconstruction 树重建 (dfs,bfs序的一些性质,以及用栈处理递归 )
- 免费手机号码归属地API查询接口
- centos7-httpd服务器
- java8关于LocalDate,Date
- JQuery EasyUI学习记录(一)
- Oracle 闪回 找回数据的实现方法
- json_decode()和json_encode()区别----2015-0929