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);
    }); 
});

这一切都很棒。但是 SOMETIMES ，有时只有...而且只有谷歌浏览器，主要列，其中包含图像的主列，突破了页脚。

当我检查Chrome的本机开发人员工具时，我可以看到不是列突破了页脚，而是只有图像本身。这些列实际上设置为它们应该的高度（它不是正确的高度）。页脚位于DOM的底部，它应该位于DOM的底部。从技术上讲，一切都已到位，但该列中的最终图像位于DOM中的所有内容之下，包括结束HTML标记。

我认为它必须是JavaScript问题，但没有错误。有没有人遇到过它？

它似乎是完全随机的，但在浏览器中打开新标签页并加载页面时最常发生。值得注意的是，那里有一个谷歌地图，如代码所示。

Answer 1

问题是，只要解析了所有HTML，脚本和CSS文件，就会触发文档就绪。但是，它可能会在您的图像加载之前触发。除非通过CSS /弃用的HTML属性给它们一个固定的高度，否则它们可能会破坏你的脚本。

加载所有网页内容后，load事件将触发，包括图片。这就是为什么它在您的更改后有效。

Answer 2

我认为我已经通过将$( document ).ready()替换为$( window ).load()来解决这个问题，以确保在列上设置任何高度之前加载所有资源（图像，地图等）。

我现在已经将页面加载了至少100次，没有任何问题。所以它看起来很积极。（如果结果不能解决，我会回来更新这个答案）。

jQuery等高的列 - 在DOM之外间歇性地打破列

2 个答案: