加載 CSS 后觸發的 jQuery 事件？

Question

我的頁面上有幾個鏈接（在<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 需要更長/更短的時間怎么辦。

如果我需要澄清任何事情，請告訴我，我可以提供更多代碼。

Answer 1

您可以使用 AJAX 調用檢索樣式表的內容，並將其插入到內聯樣式塊中，而不是創建一個新的鏈接元素並將其附加到頭部。 這樣，您就可以使用 jQuery 的“完成”回調來觸發您的支票。

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

我還沒有真正測試過這段代碼，所以可能會有一些語法錯誤，但邏輯應該足夠合理。

Answer 2

可以監視與 url 關聯的任何元素的 load 事件，這在加載 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，誰會想到？

Answer 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 中成功測試

Answer 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
});

Answer 5

在100% 確定外部工作表已延遲加載和渲染后，來到這里尋找一種刪除關鍵 CSS（元素）的方法。 這將允許我在多個項目中全局使用通用但視覺上令人愉悅的關鍵內部 CSS。 由於某些關鍵樣式在視覺上與延遲加載的樣式相反，因此需要覆蓋（太多工作）或刪除它們。 這就是我想要的，簡而言之：

1. 使用關鍵的內部 CSS 加載文檔
2. 在文檔呈現和交互后延遲加載額外的 CSS（有利於 SEO 和 UX）
3. 在加載並真正呈現花哨的附加樣式表后，從 HTML 中刪除關鍵 CSS ，以防止所有其他解決方案出現閃爍（我對此進行了大量測試）。

100% 有效的解決方案（可能不受歡迎）是使用setInterval(); 延遲加載二級CSS后，定期檢查是否真正應用了二級CSS獨有的樣式。 然后我可以刪除關鍵的 CSS（或者我想做的任何事情......）。

我在 Codepen 上創建了一個帶有評論的現場演示： https ://codepen.io/Marko36/pen/YjzQzd 和博客文章中的一些信息： 在 CSS 加載后觸發 Javascript/jQuery 事件。

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);

Answer 6

您可以簡單地繼續檢查背景顏色是否仍然相同，然后在它發生變化時執行您的操作。

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