【发布时间】：2010-08-13 14:50:37
【问题描述】：
我们有一些 JavaScript 代码可以根据父 <div/> 元素的尺寸调整 <div/> 元素的大小（调整高度/宽度/填充/边距等），特别是我们在计算。父 div 的高度和宽度在外部 CSS 文件中定义，<link> 用于在页面的<head> 部分中包含样式表。所有样式表都包含在 javascripts 之前。使用标准$(function() {}) 在 jQuery 文档就绪事件中触发 JavaScript 调整大小代码。所有样式表和 javascript 都会自动附加时间戳（Rails 应用程序），以确保它们不会被缓存（开发中）。
在 Firefox 3.6 中，每次都可以调整大小。但是在 Safari 5 中，有时调整大小会失败，因为父级高度/宽度不正确，这似乎是因为样式表在 JavaScript 之前没有加载。令人沮丧的是，这种情况每隔几次就会发生一次，并且根据浏览器/机器负载而有所不同。我可以将调整大小的代码放在setTimeout() 中并将其延迟 1 秒左右并让它可靠地工作，但这不是一个可发布的解决方案，因为它太慢了，并且仍然因机器而异。理想情况下，有一种方法可以保证下载样式表，然后触发 JS 调整大小代码。
首先，让 JS 基于从外部样式表加载的 CSS 调整大小，这是一个糟糕的设计吗？我正在考虑尝试将高度和宽度内联放置，以便从服务器呈现，但这需要大量的应用程序代码更改和与 UI 更紧密的耦合，如果可能的话，我想避免内联样式。加载样式表时是否有偶然的 webkit 事件？我不认为有。除了超时以确保在触发 JavaScript 之前加载所有样式表，还有什么建议吗？其他任何人都经历过 Webkit 和其他浏览器之间样式表加载顺序/时间的差异，并有一个解决方案可以分享吗？我可以对这个问题提出一些新的想法。
注意：通常对于图像，我们在图像上使用 load ($(thing).load(fn(){})) 事件以确保在应用任何 JavaScript 之前加载它们。如果存在这样的事情，那将是一个很好的模式。谢谢！
【问题讨论】：
标签： javascript jquery events safari webkit