检测何时应用css

Question

我正在构建一个基于AJAX的网站，其中所有网站内容都是通过AJAX加载的。

有些网页的CSS会随内容一起加载（代码如下）。加载HTML和CSS后，我运行一些脚本来更改一些图像位置，改变宽度等等。

问题是，在 CSS规则应用之前，有时我的javascript会被执行。例如：如果根据css我的div宽度应该是200px，有时javascript会将其读作1000px，所以我的计算错误。

我的研究并未产生跨浏览器解决方案，不仅可以检测已加载的图像，还可以检测加载的CSS和其他所有内容。

我使用jQuery的AJAX函数来获取所需的HTML（这部分工作正常）。获得HTML后，我将其应用于jQuery's html function。

一旦完成，我使用此代码加载所需的css：

css         = document.createElement('link');
css.rel     = 'stylesheet';
css.type    = 'text/css';
css.media   = "all";
css.href    = url;
document.getElementsByTagName("head")[0].appendChild(css);

我可以使用超时功能，但它只是盲目猜测，我想确保我的脚本在需要运行时运行。有什么建议吗？

编辑我已将此图片包含在内以使解释更清晰

Answer 1

从未尝试过，但Stylesheet load events怎么办？如果IE不会触发onload事件，并且您需要支持它，onreadystatechange应该有效。

Answer 2

我认为你的问题太复杂了。如果将所有CSS设置为仅对某个父类做出反应 - 例如：如果动态加载about页面 - 所有CSS应该看起来像.about .example {} .about h2 {} etc。联系页面.contact img {}

也是如此

现在，除非你的CSS文件非常庞大，如果你在顶部包含一个文件，你几乎可以保证将应用CSS。

Answer 3

我很高兴看到我不是唯一有这个问题的人。 我有一些JavaScript需要在CSS样式应用于DOM之后运行。

我认为ZER0建议的是一个很好的解决方案，但是我无法在我的CSS OnLoad标记上使用<link>事件，因为我在端加载了一个连接/缩小的JS文件文档，而我的连接/缩小的CSS位于文档的顶部。

我的解决方案： 使用<style>标记将JavaScript所依赖的基本CSS样式直接放在DOM上。

这样，在加载DOM时立即应用样式。当JS运行时，DOM已经应用了基本样式。