javascript - 使用 jQuery 设置高度会忽略初始加载时的内容，但在刷新后有效

Question

我正在使用此代码在我的列上设置相同的高度:

$(document).ready(function(){


  $('section').each(function(){  

        var highestBox = 0;
        $('.slide', this).each(function(){

            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  

        $('.slide',this).height(highestBox);         

    });   
});

它使所有列的高度相等，但在初始加载时它忽略了列中有图像的事实。因此图像出现在列底部的一半内部/一半外部，和/或与其他内容重叠，从而显示不正确。但是，如果我刷新页面，代码会正确设置高度，并且图像会按应有的方式包含在列中。

我在 jsFiddle 中设置了确切的代码.您可能需要打开浏览器窗 Eloquent 能看到问题，因为我在其中为较小的屏幕设置了 Bootstrap 断点。

您应该会在初始加载时看到图像与列底部的其他内容重叠。如果您刷新页面，则显示会正确呈现，并且所有元素都包含在该列中。

关于为什么会发生这种情况的任何想法？

Answer 1

这是因为，$(document).ready() 不会等待图像完全加载。当您进行刷新时，它确实有效，因为图像可能已从浏览器缓存中获取。因此，最好的办法是在 .load() 中运行代码，而不是像下面这样在 .ready() 中运行代码:

$(window).on('load', function() {
    $('section').each(function() {  

        var highestBox = 0;
        $('.slide', this).each(function(){

            if($(this).height() > highestBox) 
                highestBox = $(this).height(); 
        });  

        $('.slide',this).height(highestBox);         

    });
});