4

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

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

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

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

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

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

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

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

编辑我已包含此图像以使解释更清晰

在此处输入图像描述

4

3 回答 3

2

以前从未尝试过，但是样式表加载事件呢？如果 IE 不会触发该onload事件，并且您需要支持它，onreadystatechange则应该可以。

于 2013-02-04T02:06:37.907 回答
0

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

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

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

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

于 2014-02-05T13:27:28.953 回答
0

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

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

于 2013-02-03T22:02:40.547 回答