还有比$（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之后才会设置就绪事件处理程序。

Answer 2

$(document).ready是，只要DOM准备好进行操作就会触发，而不必等待所有图像下载。 如果您需要下载图像，则应附加到常规onload事件。 如果要动态添加图像，则可以附加到Image对象的onload事件，然后执行一些操作。

Answer 3

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

jQuery的准备页面说：

在代码依赖于加载的资产的情况下，代码应该放在load事件的处理程序中。

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

Answer 4

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