событие jQuery, которое инициировало после CSS, загружается?
У меня есть несколько ссылок на моей странице (внутри a <div id="theme-selector">) которые позволяют Вам изменять таблицы стилей CSS:
$('#theme-selector a').click(function(){
var path = $(this).attr('href');
$('head link').remove();
$('head').append('<link type="text/css" href="'+path+'" rel="stylesheet" />');
return false;
});
Теперь, после того, как я изменил стиль на странице, я хочу получить новый цвет фона, с помощью следующего кода (который я поместил после $('head').append звоните):
var bgcolor = $('body').css('background-color');
alert(bgcolor);
Проблема, я думаю, что она занимает время, чтобы браузер загрузил новую таблицу стилей, и я иногда получаю старый цвет фона в своем аварийном сообщении. Есть ли некоторое событие, которое я могу связать, который только предупредит меня после того, как все таблицы стилей будут загружены на странице?
В данный момент все, о чем я могу думать, использует a setTimeout(function(){}, 5000); который не является большим, потому что, что, если это берет дольше/короче для загрузки всего CSS на странице.
Сообщите мне, должен ли я разъяснить что-нибудь, и я могу предоставить больше кода.
3 ответа
Вместо того, чтобы создавать новый элемент ссылки и добавлять его в заголовок, вы можете получить содержимое таблицы стилей с помощью вызова AJAX и вставить его в встроенный блок стиля. Таким образом, вы можете использовать обратный вызов jQuery «complete» для снятия чека.
$('#theme-selector a').click(function(){
var path = $(this).attr('href');
$.get(path, function(response){
//Check if the user theme element is in place - if not, create it.
if (!$('#userTheme').length) $('head').append('<style id="userTheme"></style>');
//populate the theme element with the new style (replace the old one if necessary)
$('#userTheme').text(response);
//Check whatever you want about the new style:
alert($('body').css('background-color'));
});
});
Я на самом деле не тестировал этот код, поэтому могут быть некоторые синтаксические ошибки, но логика должна быть достаточно надежной.
За событием загрузки можно наблюдать для любого элемента, связанного с URL-адресом. Разве это не работает для вас при загрузке таблицы стилей css? http://api.jquery.com/load-event/
Попробуйте что-нибудь вроде этого:
var path = $(this).attr('href');
$('head link').remove();
var styleSheet = $('<link type="text/css" href="'+path+'" rel="stylesheet" />');
styleSheet.load(function(){alert("Loaded");});
$('head').append(styleSheet);
Изменить: Как указано ниже, это работает только в IE, кто бы мог подумать?
Вы можете просто продолжать проверять, остается ли цвет фона прежним, а затем делать свои дела, если он когда-либо изменится.
oldbackground=getbackground()
function checkbackground(){
if(oldbackground!=getbackground()){
oldbackground=getbackground()
//Do your thing
}
}
setInterval(checkbackground,100)