Событие jQuery, которое запускается после загрузки CSS?

У меня есть несколько ссылок на моей странице (внутри <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);

Проблема заключается в том, что для загрузки новой таблицы стилей требуется некоторое время, и я иногда получаю старый фоновый цвет в своем предупреждающем сообщении. Есть ли какое-то событие, которое я могу связать, будет предупреждать меня только после того, как все страницы стилей будут загружены на страницу?

В настоящий момент все, что я могу придумать, это использовать setTimeout(function(){}, 5000);, который не очень велик, потому что, если для загрузки всего CSS на странице требуется больше времени/короче.

Сообщите мне, нужно ли мне что-то разъяснить, и я могу предоставить больше кода.

Ответ 1

Вместо создания нового элемента ссылки и добавления его в голову вы можете получить содержимое таблицы стилей с помощью вызова AJAX и вставить его в встроенный блок стиля. Таким образом, вы можете использовать jQuery 'complete' callback, чтобы отключить ваш чек.

$('#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'));
  });
});

Я действительно не протестировал этот код, поэтому могут быть некоторые синтаксические ошибки, но логика должна быть достаточно звуковой.

Ответ 2

Событие загрузки можно просмотреть для любого элемента, связанного с 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, кто бы мог подумать?

Ответ 3

var cssLoaded = function()
{
    alert($('body').css('background-color'));
};
$('#theme-selector a').click(function(){
   var path = $(this).attr('href');
   $('head link').remove();
   $('head').append('<link onload="cssLoaded();" type="text/css" href="'+path+'" rel="stylesheet" />');
   return false;
});

успешно протестирован в Chrome 28, IE 10, FF22

Ответ 4

Вы можете использовать lazyload (плагин jQuery) для загрузки css файла. Он имеет возможность вызывать функцию, когда файл включен.

Пример:

// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
  // put your code here
});

Ответ 5

Здесь мы искали способ удалить критический CSS (элемент) после 100% уверенности, что внешние листы lazyloaded и rendered. Это позволило бы мне использовать универсальный, но визуально приятный критический внутренний CSS во всем мире по нескольким проектам. Поскольку некоторые критические стили визуально отображаются против lazyloaded, поэтому их нужно переопределить (слишком много работы) или удалить. Это то, что я хочу, одним словом:

Загрузите документ с критическим внутренним CSS
Lazyload дополнительный CSS после визуализации документа и интерактивного (хорошо для SEO и UX)
Удалите критический CSS из HTML после того, как фантастические дополнительные таблицы стилей были загружены и действительно визуализированы, чтобы предотвратить мерцание, которое происходило со всеми другими решениями (я это испытал много).

100% -ное рабочее решение (возможно, непопулярное) - использовать setInterval(); после того, как вторичный css lazyloaded, периодически проверять, действительно ли применяется стиль, уникальный для вторичного CSS. Затем я могу удалить критический CSS (или что бы я ни делал..).

Я создал демо-версию с комментариями к Codepen: https://codepen.io/Marko36/pen/YjzQzd и некоторую информацию в блоге: запуск события Javascript/jQuery после загрузки CSS.

var CSSloadcheck = setInterval(function () {
    if ($('body').css('opacity') != 1) {
    //when opacity is set to 0.99 by external sheet
      $('style#critical').remove();
      clearInterval(CSSloadcheck);  
  }
}, 100);

Ответ 6

Вы можете просто продолжать проверять, остается ли фоновый цвет одинаковым, а затем делать свою вещь, если она когда-либо изменяется.

oldbackground=getbackground()
function checkbackground(){
    if(oldbackground!=getbackground()){
        oldbackground=getbackground()
        //Do your thing
    }
}
setInterval(checkbackground,100)