使用 jQuery 的元素的 CSS 高度不一致

Question

我有一个相对简单的jquery函数，我正在使用它根据父高度设置一个div的高度。

(function() {
var $window = $(window);
function resize() {
    if ($window.width() > 800) {
        $(".event-list").each(function() {
          var parentHeight =  $(this).height();
          $(this).children('.text').css("height",parentHeight);
          $(this).children('.pattern').css("height",parentHeight);
        });
    } else {
      $(".event-list").each(function() {
        $(this).children('.text').css("height", 'auto');
        $(this).children('.pattern').css("height", 'auto');
     });
    }
}
$window
    .resize(resize)
    .trigger('resize');
})(jQuery);

您可以在此处看到它的工作：http://theadventureschool.com/new-site/events/

在我的本地计算机上，这每次都能正常工作，但是当我实时推送网站时，有时高度是正确的值，有时默认为 22px。

任何解决此问题的帮助将不胜感激。

谢谢珍妮

Answer 1

您应该等待图像完成加载。 如果我取出图像并调整页面大小，我会得到 22px 的高度。 尝试在图像加载时添加侦听器，一旦图像加载完成，然后进行初始大小调整。

(function() {
var $window = $(window);
$(".event-list img").load(function() {
    resize();
});
function resize() {
    if ($window.width() > 800) {
        $(".event-list").each(function() {
         var parentHeight =  $(this).height();
         $(this).children('.text').css("height",parentHeight);
         $(this).children('.pattern').css("height",parentHeight);
     });
} else {
  $(".event-list").each(function() {
    $(this).children('.text').css("height", 'auto');
    $(this).children('.pattern').css("height", 'auto');
 });
}
}
$window
    .resize(resize)
    .trigger('resize')
    .load(resize);
})(jQuery);

Answer 2

$（document）.ready（） 解决这个问题？

JQuery 文档：https://learn.jquery.com/using-jquery-core/document-ready/