还有比$(document).ready()更可靠的东西吗？

Question

我有一个实用程序绘制一个简单的弧,使用SVG或作为后备,Canvas.(早期版本可以在我的网站上的Raphael Arcs项目中找到.

为了适应移动解决方案,我最近添加了代码来监控容器的大小,如果更改,则重新绘制图像以适应新容量的容器.此添加仅使用包含DIV的大小; 代码将一个SVG或Canvas对象添加到DIV.

然而,反复重新加载页面,有时DIV布局即使在$(document).ready说明时也没有准备好.这似乎在Chrome下最为普遍; 我在Opera中只见过一次,从未在Firefox 3.6中看过它.包含DIV的高度和宽度返回为零.

如果您在Chrome中加载上面的链接并点击重新加载,每隔十分钟左右,Canvas演示将显示一个类似的缺陷:它的大小将是宽度:视口的100%,高度:300px,并且演示将无法正确绘制.

我查看了jQuery文档,似乎坚持认为$(document).ready()应该足够了.我宁愿没有12%的用户遇到与浏览器相关的故障.除了编写我自己的布局探测器(一个旋转的Timeout一遍又一遍地问,"容器大小了吗？"),是否有一个通用的技术或库来确保不仅加载了DOM而且布局管理器已经解决了？

[编辑]

我最终做了这样的事情(代码是Coffeescript):

$(document).ready ->
    $('.wrapper').each ->
        demo = =>
            c = new CanvasArc $('.canvas_demo', this)
            c.sweep(1.0)
            r = new RaphaelArc $('.raphael_demo', this)
            r.sweep(1.0)
        scan = =>
            if $('.canvas_demo', this).height()
                demo()
            else
                setTimeout(scan, 100)
        scan()

我真的不应该这样做.

Answer 1

你是对的,你不应该解决这个问题.答案隐藏在.ready()部分中:

使用依赖于CSS样式属性值的脚本时,在引用脚本之前引用外部样式表或嵌入样式元素很重要.

所以你需要做的就是首先包括你的CSS然后再包括你的脚本.这样,直到加载CSS之后才会设置就绪事件处理程序.