我们有一些JavaScript代码可根据父<div/>元素的尺寸调整<div/>元素的大小（调整高度/宽度/填充/边距等），特别是父元素的高度和宽度我们在计算中使用。父div高度和宽度在外部CSS文件中定义，<link>用于包括样式表，位于页面的<head>部分。所有样式表都包含在javascripts之前。使用标准$(function() {})在jQuery文档就绪事件中触发JavaScript调整大小代码。所有样式表和javascripts都会自动附加时间戳（Rails应用程序）以确保它们不被缓存（在开发中）。
在Firefox 3.6中，每次调整大小都有效。但是在Safari 5中，偶尔调整大小会失败，因为父高度/宽度不正确，这似乎是因为样式表尚未在JavaScript之前加载。令人沮丧的是，这种情况每隔几次发生一次，并且根据浏览器/机器负载而不同。我可以将调整大小代码放在setTimeout()内并将其延迟1秒左右并使其可靠地工作，但这不是一个可释放的解决方案，因为它太慢了，并且仍然因机器而异。理想情况下，有一种方法可以保证下载样式表，然后激活JS调整大小代码。
首先，这是一个糟糕的设计，要根据从外部样式表加载的CSS调整JS大小吗？我正在考虑尝试将高度和宽度放在内联，以便从服务器渲染，但这需要重大的应用程序代码更改和更紧密的UI耦合，我想尽可能避免使用内联样式。加载样式表时是否偶然发生了webkit事件？我不认为有。有关除超时之外的方法的任何建议，以确保在触发JavaScript之前加载所有样式表？其他人在Webkit和其他浏览器之间的样式表加载顺序/时间方面遇到了差异，并有一个共享的解决方案？我可以对这个问题采取一些新思路。
注意：通常对于图像，我们在图像上使用load（$(thing).load(fn(){})）事件以确保在将任何JavaScript应用于它们之前加载它们。如果存在这样的事情，这将是一个很好的模式。谢谢！
答案 0 :(得分：1)
同事（@johnreilly）发现了一些解决方案，当浏览器是Safari寻找document.readyState的值时，可以查看complete属性。
Get the real width and height of an image with JavaScript? (in Safari/Chrome)
另一个创建cssLoaded自定义事件并使用:after伪选择器来避免轮询。 http://stilbuero.de/demo/cssloaded/
所以第一个解决方案是可以接受的。我将它放在主javascript文件中并使用$.trigger()向我们的处理程序发出自定义事件，这些处理程序依赖于完全下载样式表的Webkit。