如何确定CSS是否已加载？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

在进行了一些研究并写下我的答案之后，我偶然发现了该链接，该链接解释了您需要了解的有关CSS的所有信息，何时加载CSS以及如何检查CSS。

实际上，所提供的链接对它的解释很好，以至于我在其中添加了一些引用以供将来参考。

如果您好奇，我的答案将是＃2和＃4的变体。

回答：

顺便说一句，让我们看看这里有什么。

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

魔术部分的选项，从容易到荒谬

  1. 听link.onload

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

  3. 听link.onreadystatechange

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

  5. setTimeout并检查您创建的特定元素的样式是否更改，但使用新CSS样式

第5个选项太疯狂了，它假定您可以控制CSS的内容，所以就算了。另外，它还会检查超时中的当前样式，这意味着它将刷新重排队列，并且可能会变慢。CSS到达的速度越慢，重排就越多。所以，真的，算了吧。

那么如何实施魔术呢？

// 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是否已加载？ 的全部内容， 来源链接： utcz.com/qa/412328.html

回到顶部