• 简单检测CDN链接是否有效


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

          

  • 相关阅读:
    贪心-poj-3040-Allowance
    [置顶] .net技术类面试、笔试题汇总3
    数据对接—kettle使用之二
    做好先期工作,才能有效沟通
    cc++复习基础要点08--c++单例模式
    android 限制adb的访问目录
    我奋斗18年,和你或者咖啡没有任何关系
    (3)选择元素——(15)总结(Summary)
    (3)选择元素——(16)延伸阅读(Further reading)
    网络协议复习
  • 原文地址:https://www.cnblogs.com/Sroot/p/5775456.html
Copyright © 2020-2023  润新知