Быстрое исправление для пользователей Sublime:
Не перекрестный браузер, но я думаю, что это сработает. Должно быть, после загрузки jquery, или вам придется переписать его на простом Javascript.
<script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
var rules = sheet.rules ? sheet.rules : sheet.cssRules;
if (rules.length == 0) {
$('<link rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
}
}
})
</script>
Вы действительно хотите спуститься по этому маршруту javascript для загрузки CSS в случае сбоя CDN?
Я не думал о всех последствиях производительности, но вы потеряете контроль над тем, когда CSS загружается и, как правило, для загрузки страницы, CSS - это первое, что вы хотите загрузить после HTML.
Почему бы не обработать это на уровне инфраструктуры - нарисуйте свое собственное доменное имя на CDN, дайте это короткий TTL, отслеживать файлы на CDN (например, с помощью Watchmouse или что-то еще), если сбой CDN, измените DNS на сайт резервного копирования.
Другие параметры, которые могут помочь, - это «кеш навсегда» на статическом но нет гарантии, что браузер сохранит их, конечно, или используя кэш приложений.
На самом деле, как сказал кто-то наверху, если ваш CDN ненадежный, получите новый
Энди
//(load your cdn lib here first)
<script>window.jQuery || document.write("<script src='//me.com/path/jquery-1.x.min.js'>\x3C/script>")</script>
Я бы, вероятно, использовал что-то вроде yepnope.js
yepnope([{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}]);
Взято из readme.
Посмотрите на эти функции:
$.ajax({
url:'CSS URL HERE',
type:'HEAD',
error: function()
{
AddLocalCss();
},
success: function()
{
//file exists
}
});
И вот ванильная версия JavaScript:
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
if (!UrlExists('CSS URL HERE') {
AddLocalCss();
}
Теперь фактическая функция:
function AddLocalCss(){
document.write('<link rel="stylesheet" type="text/css" href=" LOCAL CSS URL HERE">')
}
Просто убедитесь, что в голову вызывается AddLocalCss.
Вы также можете рассмотреть один из следующих способов , объясненных в этом ответе :
Загрузка с использованием AJAX
$.get(myStylesLocation, function(css)
{
$('<style type="text/css"></style>')
.html(css)
.appendTo("head");
});
Загрузка с использованием динамически созданного
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
.appendTo("head");
Load using dynamically-created <style>
$('<style type="text/css"></style>')
.html('@import url("' + myStylesLocation + '")')
.appendTo("head");
или
$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
.appendTo("head");
в этой статье предлагаются некоторые решения для бутстрапа css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
, альтернативно это работает для fontawesome
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
(function($){
var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
if ($span.css('fontFamily') !== 'FontAwesome' ) {
// Fallback Link
$('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
}
$span.remove();
})(jQuery);
</script>
Предполагая, что вы используете тот же CDN для css и jQuery, почему бы просто не сделать один тест и не поймать его?
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" /%3E'));
document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-1.6.4.min.js" %3E%3C/script%3E'));
document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-ui-1.8.16.custom.min.js" %3E%3C/script%3E'));
}
</script>
Я думаю, вопрос заключается в том, чтобы определить, загружена ли таблица стилей или нет. Один из возможных подходов состоит в следующем:
1) Добавьте специальное правило в конец вашего CSS-файла, например:
#foo { display: none !important; }
2) Добавьте соответствующий div в свой HTML:
<div id="foo"></div>
3) При готовности документа проверьте, отображается ли #foo
или нет. Если таблица стилей была загружена, она не будет видна.
Демо здесь - загружает тему гладкости jquery-ui; в таблицу стилей добавлено правило.
Вот продолжение ответа katy lavallee. Я завернул все в самоисполняющемся синтаксисе jQuery, чтобы предотвратить конфликты переменных и запустить скрипт на dom. Я также сделал сценарий неспецифичным для одной ссылки. I.E., теперь любая ссылка на стили с атрибутом url «data-fallback» будет автоматически проанализирована. Вам не нужно жестко кодировать URL-адреса в этом скрипте, как раньше.
http://jsfiddle.net/skibulk/jnfgyrLt/
<link rel="stylesheet" type="text/css" href="broken-link.css" data-fallback="broken-link2.css">
.
(function($){
var links = {};
$( "link[data-fallback]" ).each( function( index, link ) {
links[link.href] = link;
});
$.each( document.styleSheets, function(index, sheet) {
if(links[sheet.href]) {
var rules = sheet.rules ? sheet.rules : sheet.cssRules;
if (rules.length == 0) {
link = $(links[sheet.href]);
link.attr( 'href', link.attr("data-fallback") );
}
}
});
})(jQuery);
Вы могли бы проверить, существует ли таблица стилей в document.styleSheets
.
var rules = [];
if (document.styleSheets[1].cssRules)
rules = document.styleSheets[i].cssRules
else if (document.styleSheets[i].rules)
rule= document.styleSheets[i].rules
Проверить что-то конкретное для используемого файла CSS.