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)比较少的话,就不必使用这个库了。

简单检测CDN链接是否有效的更多相关文章

  1. 收集一些常用的CDN链接!无需下载快速使用!

    一些常用的CDN链接,可以到这里看: http://www.bootcdn.cn/ 这个网站查找资源的方式很简单,后缀加上要查找的名字即可: 例如: http://www.bootcdn.cn/boo ...

  2. vue单页面引入CDN链接

    不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...

  3. 脚本检测CDN节点资源是否与源站资源一致

    需求: 1.所有要检测的资源url放到一个单独文件中 2.检测cdn节点资源大小与源站文件大小是否一致 3.随机抽查几个资源,检查md5sum是否一致 4.使用多线程,可配置线程数 代码目录: hex ...

  4. iOS 网络与多线程--1.检测网络链接状态

    通过Reachability库,检测设备的网络连接状况. 使用到的类库:Reachability Reachability库,是一个iOS环境下,检测设备网络状态的库,可以在网络上搜索下载. 使用之前 ...

  5. 实现一个基于tcc/tlink的简单的编译链接工具

    一.基础研究 在这里我们需要提供一套新的c语言开发工具cc,它支持的c程序不是从main开始运行而是从CMain开始运行. 书上已经对该工具程序进行了需求分析:(1)要在屏幕中间显示彩色的字符串:(2 ...

  6. 简单的ld链接脚本学习

    一. 链接脚本的整体认识 什么是链接文件呢?作用是什么呢? 当编写了多个C文件时,我们将他们编译链接成一个可执行的文件,此时就需要用到链接脚本文件(ld).ld脚本主要功能就是:将多个目标文件(.o) ...

  7. 自动检测SOCKET链接断开

    如何判断SOCKET已经断开 最近在做一个服务器端程序,C/S结构.功能方面比较简单就是client端与server端建立连接,然后发送消息给server.我在server端会使用专门的线程处理一条s ...

  8. 常用的CDN 链接 http://cdn.code.baidu.com/ http://www.bootcdn.cn/

    http://cdn.code.baidu.com/ http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs ★新浪CDN,感觉 ...

  9. 预防cdn链接失效,无缝切换本地文件

    如今的前端项目追求的不仅仅是能用能看的程度,而是愈发追求项目的性能,对用户体验的影响.而现在的开发工具在性能优化方面也替我们做很大一部分的工作,想必大家对CDN的使用都是轻车熟路了,但是大家有没有考虑 ...

随机推荐

  1. 关于Linux系统启动时出现UVD not responding, Trying to reset the vcpu问题的解决

    本人的老古董笔记本!不知道什么时候显卡烧坏了 每次启动Linux的时候就会出现错误,信息如下: UVD not responding, trying to reset the VCPU! 讲道理,显卡 ...

  2. Android 读取excel 文件

    在面对选择国家地区,选择手机号码区号等信息的时候,常常我们是读取已存好的数据,我现在读取的就是excel里面的数据,所以在此记录下读取的方法以及注意点. 下面就是读取国际地区手机区号的数据效果图: e ...

  3. RK3288开发过程中遇到的问题点和解决方法之Kernel

    修改背光改变区间 kernel\drivers\video\backlight\pwm_bl.c static int pwm_backlight_update_status(struct backl ...

  4. Yii2 的快速配置 api 服务 yii2-fast-api

    yii2-fast-api yii2-fast-api是一个Yii2框架的扩展,用于配置完善Yii2,以实现api的快速开发. 此扩展默认的场景是APP的后端接口开发,因此偏向于实用主义,并未完全采用 ...

  5. git如何强制用远程分支更新本地

    git本地即使有修改如何强制更新: 本地有修改和提交,如何强制用远程的库更新本地.我尝试过用git pull -f,总是提示 You have not concluded your merge. (M ...

  6. 文末两大福利 | 微软Inspire大会全接触:微软发布Microsoft 365......

    在7月11日举行的“Inspire年度合作伙伴大会”上 ,微软首席执行官萨提亚·纳德拉发布了Microsoft 365. 它包含了:Office 365.Windows 10和企业移动性+安全性(En ...

  7. jsp另外五大内置对象之-exception

    //有异常的页面 <%@ page language="java" contentType="text/html; charset=utf-8" page ...

  8. vijos 1320 清点人数

    背景 NK中学组织同学们去五云山寨参加社会实践活动,按惯例要乘坐火车去.由于NK中学的学生很多,在火车开之前必须清点好人数. 描述 初始时,火车上没有学生:当同学们开始上火车时,年级主任从第一节车厢出 ...

  9. 【Python图像特征的音乐序列生成】深度卷积网络,以及网络核心

    这个项目主要涉及到两个网络,其中卷积神经网络用来提取图片表达的情绪,提取出一个二维向量. 网络结构如图: 词向量采用预训练的glove模型,d=50,其他信息包括了图片的“空旷程度”.亮度.对比度等信 ...

  10. SAP Cloud for Customer Price-计价简介

    SAP Cloud for Customer(本文以下简称C4C)作为SAP新一代的CRM云产品,其Price功能实现虽不如以前的SAP ERP那么复杂,但是也能满足企业运作中各种Price需求. C ...