每个项目的高度有时不计算

Each item height sometimes not being calculated

本文关键字：计算 高度 项目      更新时间：2023-09-26
if($('body').hasClass('single') && ($overlayPanel) ) {
    $overlayPanel.each(function(){
        $(this).height($(this).prev().height());
    })
}

似乎50%的时间图像的高度没有及时计算之前，它的分配创建overlayPanel的高度(只是结果在高度0px)。是否有一个更强大的方式来写这个，使overlayPanel将始终具有prev()的高度?

你应该证明

  • 当这个函数被调用时，所有的图像都被加载($(document).ready())
  • (或者图片的大小由css设置)
  • dom中每个$overlayPanel的前一个标签总是img标签

如果每个元素都与前一个元素具有相同的高度，那么它们都与第一个元素具有相同的高度，因此至少肯定有更简单的方法来编写它。

对于图像，您必须等待图像加载才能获得高度，您可以使用窗口。Onload，或者监听第一个图像的Onload事件，然后将其他图像的高度设置为相同的高度

if( $('body').hasClass('single') && $overlayPanel.length ) {
    var img = new Image();
    img.onload = function() {
        $overlayPanel.css('height', $(this).height())
    }
    img.src = $overlayPanel.first().prop('src');
    if (img.complete) img.onload();
}
相关文章：