jQuery等高列-列在DOM之外間歇性地中斷

Question

我的簡化代碼是這樣的：

<div class="equal clearfix">
    <section class="secondary column clearfix">
    </section>
    <section class="primary column clearfix">
        <div id="map_canvas" style="width:520px; height:350px;" class="google-map"></div>

        <div>
            <a href="#" class="overlayed-link">link</a>
            <img src="/images/image.jpg" class="image" />
        </div>
         <div>
            <a href="#" class="overlayed-link">link</a>
            <img src="/images/image2.jpg" class="image" />
        </div>
    </section>
</div><!-- /.equal -->
<footer>Blah</footer>

然后我有我的JavaScript / jQuery：

$( document ).ready( function() {
    $('.equal').each(function(){  
        var highestBox = 0;
        $('.column', this).each(function(){
            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  
        $('.column',this).height(highestBox);
    }); 
}); 

這一切都很好。 但是隨后， 有時 ，並且僅在某些情況下……並且僅在Google Chrome中 ，主列（其中包含圖像）突破了頁腳。

當我檢查了Chrome的本機開發人員工具后，我發現它不是超出頁腳的列，而是僅圖像本身。 列實際上設置為應具有的相等高度（這不是正確的高度）。 頁腳位於DOM的底部，應該位於該位置。 從技術上講，所有內容均已准備就緒，但該列中的最終圖像位於DOM中所有內容的下方，包括結束HTML標記。

我想這一定是JavaScript問題，但是沒有錯誤。 有人遇到過嗎？

這似乎是完全隨機的，但是在瀏覽器中打開新標簽頁並加載頁面時，大多數情況下會發生這種情況。 如代碼中所示，也可能值得注意的是其中有一個Google Map。

Answer 1

問題在於，所有HTML，腳本和CSS文件都將在解析后立即觸發准備就緒的文檔。 但是，它可能在加載圖像之前觸發。 除非通過CSS /不推薦使用的HTML屬性為其指定了固定高度，否則它們可能會破壞您的腳本。

load所有頁面內容（包括圖像）后，將觸發load事件。 這就是為什么更改后它可以工作的原因。

Answer 2

我想我已經解決了此問題，方法是將$( document ).ready()替換$( window ).load()以確保在設置任何高度之前加載包括我所有資產（圖像，地圖等）在內的所有內容列。

我現在至少已加載該頁面100次，沒有任何問題。 所以看起來很積極。 （如果結果無法解決，我將返回並更新此答案）。