Bootstrap 3後備爲Javascript和CSS

昨天我所有的Bootstrap 3.3.x網站沒有從MaxCdn（荷蘭）加載js/css文件，所以今天我搜索了一個後備。 JQuery很簡單，但對於Bootstrap CSS，我只能找到將本地css文件作爲頭部的第一行的示例。以下代碼是我迄今爲止在回退時將本地Bootstrap CSS放在正確的位置。Bootstrap 3後備爲Javascript和CSS

在頭：

<meta charset="utf-8"> 
<title>CDN fallback</title> 
<link id="cssbs" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/ABC_bootstrap.min.css"> 
<link id="csscu" rel="stylesheet" href="style.css"> 
<meta name="author" content="Foo">

在身體的結尾：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/ABC_jquery.min.js"></script> 
<script> 
window.jQuery || document.write('<script src="lib/jquery-1.11.1/jquery.min.js"><\/script>') 
</script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/ABC_bootstrap.min.js"></script> 
<script> 
if(typeof($.fn.modal) === 'undefined'){ 
    document.write('<script src="lib/bootstrap-3.3.5/js/bootstrap.min.js"><\/script>') 
} 
$(document).ready(function(){ 
    var bodyColor = $('body').css('color'); 
    var localCss = '<link rel="stylesheet" href="lib/bootstrap-3.3.5/css/bootstrap.min.css">'; 
    if(bodyColor != 'rgb(51, 51, 51)'){ 
    $("#cssbs").replaceWith(localCss); 
    } 
}); 
</script>

我的問題：什麼perormance？任何建議更好的回退？

注意：對於測試，我在CDN文件名中鍵入ABC。

謝謝，羅納德做備用負荷爲CDN的是有腳本

來源

2015-10-16 bron

單程/有超時異步加載樣式表，這樣，如果CDN時間太長響應（因爲它可能會下降），您可以在合理的時間內加載替換文件。爲此，您可以在下面實現一個函數，如fallbackLoad，並將其放在HTML頁面的HEAD部分。

function fallbackLoad(urls, callback, timeout) { 
    var url = urls.shift() 
    timeout = timeout || undefined; 
    callback = callback || function() {}; 
    var error = (function(urls, callback) { 
     return function() { 
      if (urls.length == 0) { 
       console.error('Failed to fallback, all urls down'); 
      } else { 
       makeRequest(urls.shift(), callback, error); 
      } 
     }; 
    })(urls, callback); 
    return makeRequest(url, callback, error); 
}

然後定義您的makeRequest功能

function makeRequest(url, success, error, timeout) { 
    var xhr = new XMLHttpRequest(); 
    if (timeout) { 
     xhr.ontimeout = error; 
    } 
    xhr.onload = function() { 
     if (xhr.readyState === 4) { 
      if (xhr.status === 200) { 
       success(xhr.responseText); 
      } else { 
       error(); 
      } 
     } 
    }; 
    xhr.open("GET", url, true /* async */); 
    if (timeout) xhr.timeout = timeout; 
    xhr.send(null); 
}

現在你可以調用腳本的HEADfallbackLoad沒有它阻礙了你的網頁的加載速度。你可以稱它爲

fallbackLoad([ 
    '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/ABC_jquery.min.js', 
    'lib/jquery-1.11.1/jquery.min.js' 
], function(response) { 
    .... 
}, 500 /* ms */);

來源

2015-10-16 18:13:31 Ford

Bootstrap 3後備爲Javascript和CSS

回答

相關問題