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中设置了确切的代码。您可能需要打开浏览器窗口以查看问题，因为我在那里有较小屏幕的引导断点。

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

有关为何发生这种情况的任何想法？

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

    });
});

使用jQuery设置高度会在初始加载时忽略内容，但在刷新后会起作用

1 个答案: