javascript - 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 的 native 开发人员工具时，我可以看到它不是突破页脚的列，而只是图像本身。这些列实际上设置为应有的高度(这不是正确的高度)。页脚位于 DOM 的底部，它应该在的位置。从技术上讲，一切都已就绪，但该列中的最终图像位于 DOM 中所有内容的下方，包括结束 HTML 标记。

我想这一定是 JavaScript 问题，但没有错误。有人遇到过吗？

这似乎是完全随机的，但在浏览器中打开新选项卡并加载页面时最常发生。可能还值得注意的是，其中有一个 Google map ，如代码所示。

Answer 1

问题是，一旦所有 HTML、脚本和 CSS 文件都被解析，文档准备就绪就会触发。但是，它可能会在您的图像加载之前触发。除非通过 CSS/已弃用的 HTML 属性为它们指定固定高度，否则它们可能会破坏您的脚本。

load 事件在页面的所有内容(包括图像)加载完毕后触发。这就是它在您的更改后起作用的原因。