26

我的页面上有几个链接(在 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); 

我认为,问题在于浏览器需要一些时间来下载新样式表,并且有时我会在警报消息中看到旧的背景颜色。是否有一些我可以绑定的事件,只有在页面上加载了所有样式表后才会提醒我?

目前,我能想到的只是使用一个setTimeout(function(){}, 5000);不太好的,因为如果加载页面上的所有 CSS 需要更长/更短的时间怎么办。

如果我需要澄清任何事情,请告诉我,我可以提供更多代码。

4

6 回答 6

20

您可以使用 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'));
  });
});

我还没有实际测试过这段代码,所以可能会有一些语法错误,但逻辑应该足够健全。

于 2010-04-03T14:18:06.183 回答
13

可以监视与 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,谁会想到呢?

于 2010-04-03T20:07:32.817 回答
0
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 中成功测试

于 2013-07-24T07:56:43.490 回答
0

您可以使用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
});
于 2013-07-24T08:33:00.140 回答
0

在 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);
于 2018-07-10T13:48:49.743 回答
-2

您可以简单地继续检查背景颜色是否仍然相同,然后在它发生变化时执行您的操作。

oldbackground=getbackground()
function checkbackground(){
    if(oldbackground!=getbackground()){
        oldbackground=getbackground()
        //Do your thing
    }
}
setInterval(checkbackground,100)
于 2010-04-03T14:05:19.117 回答