如何确定CSS是否已加载？ [英] How to determine if CSS has been loaded?

问题描述

如何断言页面的CSS已成功加载并在Watin 2.1中应用其样式？

解决方案

做一些研究和写我的回答，我偶然发现了这个链接，解释了一切你需要知道CSS，当它加载和如何检查它。

提供的链接解释得很好，实际上，我添加了一些引用，供将来参考。

_{如果你很好奇，我的答案是＃2和＃4的变体。}

是否真的加载了样式表？

...

这样，让我们​​看看我们在这里。

  //我的回调函数
 //它依赖于CSS被加载函数
 CSSDone（）{
 alert（'zOMG，CSS is done'）; 
}; 
 
 //载入一些样式表
 var url =http://tools.w3clubs.com/pagr/1.sleep-1.css，
 head = document .getElementsByTagName（'head'）[0]，
 link = document.createElement（'link'）; 
 
 link.type =text / css; 
 link.rel =stylesheet; 
 link.href = url; 
 
 // MAGIC 
 //当CSS到达时调用CSSDone（）
 head.appendChild（link）; 
  

魔法部分的选项，从nice-and-easy到可笑

1. 收听link.onload


2. 收听link.addEventListener（'load'）


3. 收听link.onreadystatechange


4. setTimeout并检查document.styleSheets中的更改


5. setTimeout并检查特定样式中的更改




第五个选项过于疯狂，并假定您可以控制CSS的内容，因此，算了吧。此外，它检查当前样式在超时意味着它将刷新回流队列，并可能潜在慢。 CSS到达越慢，回流越多。




$ b

那么如何实现魔法呢？ $ c> // MAGIC

//＃1
link.onload = function（）{
CSSDone（'onload listener'）;
};

//＃2
if（link.addEventListener）{
link.addEventListener（'load'，function（）{
CSSDone（DOM's load event ）;
}，false）;
};

//＃3
link.onreadystatechange = function（）{
var state = link.readyState;
if（state ==='loaded'|| state ==='complete'）{
link.onreadystatechange = null;
CSSDone（onreadystatechange）;
}
};

//＃4
var cssnum = document.styleSheets.length;
var ti = setInterval（function（）{
if（document.styleSheets.length> cssnum）{
//快速加载一堆CSS文件时需要更多工作
//例如从cssnum循环到新长度，查找
//为document.styleSheets [n] .href === url
// ...

// FF过早地改变长度:(
CSSDone（'listening of styleSheets.length change'）;
clearInterval（ti）;
}
}，10）;

// MAGIC ends





How can i Assert that the CSS for a page has successfully loaded and applied its styles in Watin 2.1?

解决方案

After doing some research and writing up my answer, I stumbled upon this link that explains everything you need to know about CSS, when it is loaded and how you can check for it.

The link provided explains it so well, in fact, that I'm adding some quotes from it for future reference.
_{If you're curious, my answer was going to be #2 and a variation of #4.}

When is a stylesheet really loaded?

...

With that out of the way, let's see what we have here.

// my callback function 
// which relies on CSS being loaded function
CSSDone() {
    alert('zOMG, CSS is done');
};

// load me some stylesheet 
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
    head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.type = "text/css"; 
link.rel = "stylesheet";
link.href = url;

// MAGIC 
// call CSSDone() when CSS arrives
head.appendChild(link);

Options for the magic part, sorted from nice-and-easy to ridiculous

1. listen to link.onload
2. listen to link.addEventListener('load')
3. listen to link.onreadystatechange
4. setTimeout and check for changes in document.styleSheets
5. setTimeout and check for changes in the styling of a specific element you create but style with the new CSS

5th option is too crazy and assumes you have control over the content of the CSS, so forget it. Plus it checks for current styles in a timeout meaning it will flush the reflow queue and can be potentially slow. The slower the CSS to arrive, the more reflows. So, really, forget it.

So how about implementing the magic?

// MAGIC 

// #1   
link.onload = function () {
    CSSDone('onload listener');
};   

// #2   
if (link.addEventListener) {
    link.addEventListener('load', function() {
        CSSDone("DOM's load event");
    }, false);   
};   

// #3   
link.onreadystatechange = function() {
    var state = link.readyState;
    if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone("onreadystatechange");
    }   
};

// #4   
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        // needs more work when you load a bunch of CSS files quickly
        // e.g. loop from cssnum to the new length, looking
        // for the document.styleSheets[n].href === url
        // ...

        // FF changes the length prematurely :(
        CSSDone('listening to styleSheets.length change');
        clearInterval(ti);
    }   
}, 10);

// MAGIC ends

这篇关于如何确定CSS是否已加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！