還有比$（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調整大小，寬度為百分比，這樣就可以在文檔准備就緒時調整它的大小。