Question

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

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

反复重新加载页面，但是，即使$(document).ready表示它已经存在，有时DIV布局也没有准备好。这似乎在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() section：

中

当使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

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

Answer 2

$(document).ready的全部意义在于，只要DOM准备好进行操作就会触发，而无需等待所有图像下载。如果您需要下载图片，则应附加到常规onload事件。如果您要动态添加图片，则可以attach to the onload event of an Image object然后执行一些操作。

Answer 3

ready是一个表示DOM已准备好编写脚本的事件 - 也就是说，所有元素都存在其基本属性，您可以添加/删除元素等 - 但并非所有元素都已呈现。如果您想确保所有“已加载资源”已完全加载所有内容，包括图像以及可能需要时间加载的其他嵌入内容，请使用window.onload（jQuery中为load）。

jQuery's ready page说：

如果代码依赖于加载的资产，则代码应放在load事件的处理程序中。

您正在查看的div的任何内容是“加载资产”吗？如果是这样，那么他们的加载可以在div事件之后更改ready的大小。从理论上讲，一旦特定的已加载资产下载完毕，您就应该能够使用asset.load进行响应。使用document.ready连接此事件。

Answer 4

你不应该依赖脚本来调整div的大小，而是让他通过CSS调整大小，宽度为百分比，这样就可以在文档准备好了它的大小。

还有比$（document）.ready（）更可靠的东西吗？

4 个答案: