代码之家 › 专栏 › 技术社区 › Andrew Atkinson

Firefox和Safari样式表加载时间,加载时触发JavaScript事件

webkit safari events jquery javascript

Andrew Atkinson · 技术社区 · 14 年前

<div/> 元素(根据父元素的尺寸调整高度/宽度/填充/边距等) <div/> 元素,特别是我们在计算中使用的父元素的高度和宽度。父div的高度和宽度在外部CSS文件中定义,并且 <link> 用于在 <head> 页面的部分。所有样式表都包含在javascripts之前。JavaScript resize代码在jQuery document ready事件中使用标准 $(function() {}) . 所有样式表和javascript都会自动添加时间戳(Rails应用程序),以确保它们不会被缓存(在开发中)。

setTimeout() 并将其延迟1秒左右,以使其可靠地工作,但这不是一个可发布的解决方案,因为它太慢,并且仍因机器而异。理想情况下会有办法保证

首先,这是一个糟糕的设计,让JS根据CSS从外部样式表加载来调整大小吗?我正在考虑尝试将高度和宽度内联放置,以便从服务器呈现,但这需要显著的应用程序代码更改和与UI的更紧密耦合,如果可能的话,我希望避免内联样式。加载样式表时是否偶然发生webkit事件?我想没有。除了超时之外,还有什么其他方法可以确保在启动JavaScript之前加载所有样式表的建议吗?其他人有没有经历过Webkit和其他浏览器在样式表加载顺序/时间上的差异,有没有解决方案可以共享?在这个问题上我需要一些新的思考。

注意:通常对于图像,我们使用load( $(thing).load(fn(){}) )事件,以确保在对图像应用任何JavaScript之前加载它们。如果存在这样的事情,那将是一个很好的模式。谢谢!

1 回复 | 直到 14 年前

Community CDub 8 年前

同事(@johnrelly)找到了几个解决方案,其中一个是民意调查 document.readyState complete .

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

cssLoaded 自定义事件和使用 :after 伪选择器以避免轮询。 http://stilbuero.de/demo/cssloaded/

$.trigger()

推荐文章

Aaron · IdentityServer4和运行在iOS 9.3.5上的客户端(禁用JavaScript)

7 年前

thank_K · 检测safari并停止脚本

7 年前

mattaningram · 在Safari中,框阴影颜色函数中的CSS自定义属性渲染不正确

7 年前

Dockson · iOS Safari 11.3上navigator中没有服务人员

7 年前

Emrah Åentürk · pc和移动设备之间的角度5日期时区差异

7 年前

acb1980 · 上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断

7 年前

Archna Rangrej · 如何在Safari中录制HTML5视频?

7 年前

akash · 我的html背景视频未在safari中播放

7 年前

DsXack · 如何在iOS和macOS上使用Safari中的网络摄像头录制视频?

7 年前

Charlie McShane · Flex Wrap+TransformY在Safari中不起作用

7 年前