load local bootstrap css and js if load fail from remote

Question

I'm trying to load local css & js file when remote file is not available. (wifi dis-connected) The major problem is "I don't know how to let css load proper". As I know jquery should put on bottom of body to reduce page load time. In browser's address line, I input localhost:8000//example.html (use a static web page web browser).

Demo Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Go By Example - Google Go (golang) code examples" />
  <link rel="icon" href="favicon.ico">
  <title>Go by Example - Google Go (golang) code examples</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
  <body>
    <span class="glyphicon glyphicon-flash"></span>
    ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script id="bsscript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>$("#bsscript").load("js/bootstrap.min.js")</script>

  </body>
</html>

Output error message of chromium

GET file://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css net::ERR_FILE_NOT_FOUND local.html:9
GET file://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css net::ERR_FILE_NOT_FOUND local.html:10
GET http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js net::ERR_INTERNET_DISCONNECTED local.html:16
GET file://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js net::ERR_FILE_NOT_FOUND local.html:18

Try to check if the internet is accessible, then load the remote files. Else load the local files. That way, you can isolate the error to if the files themselves can be loaded or not. — Simple Sandman
– Simple Sandman, Commented Sep 9, 2014 at 16:31
I don't know how to write the js for checking internet, and load css dynamic. — Daniel YC Lin
– Daniel YC Lin, Commented Sep 9, 2014 at 23:26

Thibaud Granier · Accepted Answer · 2016-03-18 11:44:35Z

bootstrap cdn callback :

<head>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
  <!-- APP CONTENT -->

  <!-- jQuery CDN -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- jQuery local fallback -->
  <script>window.jQuery || document.write('<script src="/local/jquery.min.js"><\/script>')</script>
  <!-- Bootstrap JS CDN -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <!-- Bootstrap JS local fallback -->
  <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="/local/bootstrap.min.js"><\/script>')}</script>
  <!-- Bootstrap CSS local fallback -->
  <script>
    $(document).ready(function() {
    var bodyColor = $('body').css('color');
    if(bodyColor != 'rgb(51, 51, 51)') {
    $("head").prepend('<link rel="stylesheet" href="/local/bootstrap.min.css">');}});
  </script>
</body>

Sergey Paukov · Accepted Answer · 2018-01-10 17:23:13Z

and same in pureJS:(help,when jQuery is not availiable(Arduino etc..))

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script sync type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js?modified=20012009"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var element = document.body,
                style = window.getComputedStyle(element),
                top = style.getPropertyValue('color');
            if (top!='rgb(51, 51, 51)'){
                var el = document.head,
                 elChild = document.createElement('link');
                elChild.innerHTML = '<link sync rel="stylesheet" href="bootstrap.min.css?modified=20012001">';
                el.insertBefore(elChild, el.firstChild);
            }
        if(isEmpty(Chart)){
            var tag = document.createElement("script");
            tag.src = "chart.min.js?modified=20012009";
            document.getElementsByTagName("head")[0].appendChild(tag);
        }

        })

    </script>

Collectives™ on Stack Overflow

load local bootstrap css and js if load fail from remote

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related