火狐和Safari样式表加载时间，加载时触发JavaScript事件
我们有一些JavaScript代码来调整<div/>元素的大小(调整高度/宽度/填充/边距等)。基于父<div/>元素的维度，特别是我们在计算中使用的父元素的高度和宽度。父div高度和宽度在外部CSS文件中定义，<link>用于在页面的<head>部分中包含样式表。所有样式表都包含在javascripts之前。JavaScript调整大小代码是在使用标准$(function() {})的jQuery文档就绪事件中触发的。所有样式表和javascripts都会自动附加时间戳(Rails应用程序)，以确保它们不被缓存(正在开发中)。
在Firefox 3.6中，每次调整大小都有效。但是，在Safari 5中，由于父级高度/宽度不正确，有时调整大小会失败，这似乎是因为样式表没有在JavaScript之前加载。令人沮丧的是，这种情况每隔几次发生一次，而且取决于浏览器/机器负载的不同。我可以将调整大小的代码放入setTimeout()中，并将其延迟大约1秒左右，并使其可靠地工作，但这不是一个可发布的解决方案，因为它太慢，并且仍然随机器而变化。理想情况下，应该有一种方法来保证下载样式表，然后启动JS调整大小的代码。
首先，这是否是一个糟糕的设计，让JS基于外部样式表加载CSS进行调整？我正在考虑将高度和宽度内联，以便从服务器呈现，但这需要重要的应用程序代码更改和与UI更紧密的耦合，如果可能的话，我希望避免内联样式。加载样式表时是否偶然发生webkit事件？我不认为有。对于超时以外的方法是否有任何建议，以确保在触发JavaScript之前加载所有样式表？还有谁在Webkit和其他浏览器之间在样式表加载顺序/时间上有不同的体验，并且有一个可以共享的解决方案？在这个问题上我需要一些新的思考。
注意:对于图像，我们通常使用图像上的load ($(thing).load(fn(){}))事件来确保它们在应用任何JavaScript之前被加载。如果存在这种情况，这将是一个很好的模式。谢谢!
回答 1
Stack Overflow用户
发布于 2010-08-13 17:35:06
同事(@johnreilly)找到了几种解决方案，当浏览器查找complete的值时，其中一种就会轮询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的处理程序发出一个自定义事件，该处理程序依赖于已完全下载样式表的Webkit。
https://stackoverflow.com/questions/3478021
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号