检测何时应用 css答案

【问题标题】：Detect when css is applied检测何时应用 css
【发布时间】：2013-02-03 18:57:20
【问题描述】：

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

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

问题是有时我的 javascript 会在应用 CSS 规则之前执行。例如：如果我的 div 宽度根据 css 应该是 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);

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

编辑我已经包含了这张图片以使解释更清楚

【问题讨论】：

在插入 DOM 之前，您是否可以只阅读并删除收到的内容中的 <style> 标签，或者您实际上需要一些定义？
@jAndy 我不确定我是否理解你的意思，我没有使用<style> 标签，我正在从单独的文件中加载css

标签： javascript jquery css

【解决方案1】：

以前从未尝试过，但是Stylesheet load events 呢？如果 IE 不会触发 onload 事件，而您需要支持它，onreadystatechange 应该可以工作。

【讨论】：

【解决方案2】：

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

也是如此

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

【讨论】：

你没有理解我的问题，我的 css 被应用了，问题是我在网站已经加载时加载了我的 css 文件，当我加载那个 css 文件时我立即调用需要的 javascript 函数要应用 css，但据我观察大约需要 1-50 毫秒，所以有时我的 javascript 在应用 css 之前获取元素的尺寸，因此破坏了我的计算
你为什么要这样加载你的CSS？我认为你的代码过于复杂了。有时更简单通常更好，更少的代码和更少的可能出错的事情。无需使用 JS 加载样式表。只需在文档的开头，将其放在 JS/jQuery 表单之前，它将在其他库加载之前加载。
我会有一个非常非常大的文件，大约在 15k 到 40k 行代码之间，并且随着时间的推移它会不断增长，因为网站很大，所以很难使用它文件的大小以及连接速度较慢的用户需要很长时间才能下载该文件

【解决方案3】：

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

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

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

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

【讨论】：