在加载CSS之后触发的jQuery事件？ [英] jQuery event that triggers after CSS is loaded?

问题描述

我在我的页面上有一些链接（在< div id =theme-selector> 中），允许您更改CSS样式表：

  $（'＃theme-selector a'）。click（function（）{
 var path = $这个）.attr（'href'）; 
 $（'head link'）remove（）; 
 $（'head'）。append（'< link type =text / css href ='+ path +' =stylesheet/>'）; 
 return false; 
}）; 
  

现在，改变页面上的样式之后，我想获得新的背景颜色，使用下面的代码（我放在 $（'head'）之后）

$

  var bgcolor = $（'body'）。css（'background-color'）; 
 alert（bgcolor）; 
  

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

目前，我可以想到的是使用 setTimeout（function（）{}，5000）; 这不是很好，因为如果需要更长/更短的加载页面上的所有CSS。

让我知道如果我需要澄清什么，我可以提供更多的代码。

解决方案

p>而不是创建一个新的链接元素并将其附加到头部，您可以通过AJAX调用检索样式表的内容，并将其插入到内联样式块中。这样，你可以使用jQuery的'complete'回调来触发你的支票。

  $（'＃theme-selector a' ）.click（function（）{
 var path = $（this）.attr（'href'）; 
 $ .get（path，function（response）{
 // Check if用户主题元素就位 - 如果没有，创建它。
 if（！$（'＃userTheme'）。length）$（'head'）。append（'< style id =userTheme ;< / style>'）; 
 
 //用新样式填充主题元素（如果需要，替换旧样式）
 $（'＃userTheme'）。 ）; 
 
 //检查你想要的关于新样式的任何内容：
 alert（$（'body'）。css（'background-color'））; 
} ; 
}）; 
  

我没有实际测试过这个代码，所以可能会有一些语法错误，逻辑应该够好。

I have a couple of links on my page (inside a <div id="theme-selector">) which allow you to change the CSS stylesheets:

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

Now, after I've changed the style on the page, I want to get the new background color, using the following code (which I put after the $('head').append call):

var bgcolor = $('body').css('background-color');
alert(bgcolor); 

The problem is, I think, that it takes some time for the browser to download the new stylesheet and I sometimes get the old background color in my alert message. Is there some event I can bind that will only alert me after all the stylesheets are loaded on the page?

At the moment, all I can think of is using a setTimeout(function(){}, 5000); which isn't great, because what if it takes longer/shorter to load all the CSS on the page.

Let me know if I need to clarify anything and I can provide more code.

解决方案

Rather than creating a new link element and appending it to the head, you could retrieve the contents of the stylesheet with an AJAX call, and insert it into an inline style block. That way, you can use jQuery's 'complete' callback to fire off your check.

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

I haven't actually tested this code, so there may be some syntax-y errors, but the logic should be sound enough.

这篇关于在加载CSS之后触发的jQuery事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！