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

这里可以找到一种方法，可以在确定外部工作表已延迟加载并呈现后，删除关键的CSS（元素）。这将使我能够在多个项目中全局使用通用的，但视觉上令人愉悦的关键内部CSS。由于某些关键样式在视觉上与延迟加载的样式相反，因此需要重写（过多的工作）或删除它们。简而言之，这就是我想要的：

使用重要的内部CSS加载文档

在呈现并交互文档后延迟加载其他CSS（适用于SEO和UX）

在加载并真实呈现了其他样式表之后，请从HTML中删除关键的CSS，以防止其他解决方案出现的闪烁（我已经对此进行了很多测试）。

一个100％可行的解决方案（可能不受欢迎）是使用 setInterval（）; 懒惰加载辅助CSS之后，定期检查辅助CSS唯一的样式是否真正被应用。然后，我可以删除关键的CSS（或我想做的任何事情..）。

我创建了一个实时演示，其中对Codepen发表了评论：https://codepen.io/Marko36/pen/YjzQzd，并在博客文章中发表了一些信息：Triggering a Javascript/jQuery event after CSS has loaded。

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)

加载CSS后触发的jQuery事件？

6 个答案: