javascript - 有什么比$(document).ready()更靠谱的吗？

Question

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

为了适应移动解决方案，我最近添加了代码来监视容器的大小，如果它发生变化，则重新绘制图像以适应新大小的容器。此添加仅使用包含 DIV 的大小；该代码将 SVG 或 Canvas 对象添加到 DIV。

然而，反复重新加载页面，有时即使 $(document).ready 显示 DIV 布局已就绪，DIV 布局仍未就绪。这似乎在 Chrome 下最为普遍；我只在 Opera 上见过一次，在 Firefox 3.6 上从未见过。包含的 DIV 的高度和宽度返回为零。

如果您在 Chrome 中加载上面的链接并点击重新加载，Canvas 演示每点击十次左右就会显示一个类似的缺陷:它的大小宽度:视口(viewport)的 100%，高度:300 像素，并且演示不会绘制正确。

我查看了 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() section中:

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

因此，您需要做的就是首先包含您的 CSS，然后再包含您的脚本。这样，您的就绪事件处理程序甚至在加载 CSS 之后才被设置。