我如何断言页面的 CSS 已成功加载并在 Watin 2.1 中应用其样式?
最佳答案
在做了一些研究并写下我的答案后,我偶然发现了 this link这解释了您需要了解的有关 CSS 的所有信息,它何时加载以及如何检查它。
所提供的链接解释得非常好,事实上,我添加了一些引用以供将来引用。
如果您好奇的话,我的答案是#2 和#4 的变体。
When is a stylesheet really loaded?
...
说完这些,让我们看看这里有什么。
// 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);
魔法部分的选项,从简单到荒谬排序
- 听link.onload
- 监听 link.addEventListener('load')
- 听 link.onreadystatechange
- setTimeout 并检查 document.styleSheets 中的更改
- 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 - 如何判断CSS是否已经加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10537039/