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. Volley与Picasso的对比

    Volley与Picasso的对比 想写一篇文章来对比一下Volley以及Picasso,有人或许会说了,Volley和Picasso的服务对象都不同,Picasso是专注于图片的下载以及处理,而Vo ...

  2. C语言的time函数和localtime函数

    1.获取当前时间,并获取当前时间(即系统时间)距离1970年1月1日的时间间隔,以秒为单位. 2.获取指定时间距离1970年1月1日的时间间隔,以秒为单位.

  3. java uuid第一次性能

    在java中产生uuid的方式是使用java.util.UUID. UUID.randomUUID().toString(); 我在测试redis性能时,使用uuid产生测试数据,发现多线程测试red ...

  4. selenium +python之多线程与多进程应用于自动化测试

    多线程与多进程与自动化测试用例结合起来执行,从而节省测试用例的总体运行时间. 多线程执行测试测试用例 以百度搜索为例,通过不同的浏览器来启动不同的线程. from selenium import we ...

  5. 在windows 上编译部署Rap2

    在windows 上编译部署Rap2 引言 安装需要的环境 安装后端站点 创建数据库 在全局安装pm2 和 typescript 配置mysql,redis 数据库链接配置 初始化 编译 初始化数据库 ...

  6. python爬虫之路——Python的re模块及其方法

    介绍常用的三种方法:search(),sub(),findall() search():匹配并提取第一个符合规律的内容,然后返回一个正则表达式的对象 #提取字符串中的第一个数字 import re a ...

  7. cesium-大规模人群运动测试

    环境:cesium1.57: 笔记本电脑:集成显卡+独显Navida 1060 测试内容:大规模人群运动(500人,可设置运动的路径),可行性及帧率 测试结果:21-23FPS,较为流畅:集显70%- ...

  8. thinkphp 的事务回滚处理 和 原始PHP的事务回滚实例

    1.  要程序里面支持事务,首先连接的数据库和数据表必须支持事务 mysql   为例: 数据库InnoDB支持 transactions 数据表支持事务:InnoDB  支持transaction ...

  9. vim 自动补全　颜色设置

    vim 自动补全 颜色设置 hi Pmenu ctermfg=black ctermbg=gray guibg=# hi PmenuSel ctermfg= ctermbg= guibg=# guif ...

  10. 关于SQL语言的初步认识

    关于SQL语言的初步认识 1.一个SQL数据库是表(Table)的集合,它由一个或多个SQL模式定义. 2.一个SQL表由行集构成,一行是列的序列(集合),每列与行对应一个数据项. 3.一个表或者是一 ...