在ajax之后，图像上的jQuery高度不可能

当前有一个函数，用于确定图像的最高高度，以设置图像容器元素的最小高度，在本例中为数字

该函数在加载窗口和调整窗口大小时工作正常。但是，在ajax调用将内容加载到我的目标div后，函数的结果只返回“0”。我已经读到，我可能得到图像尺寸太快，这就是为什么它返回“0”，但不知道如何正确修改

在ajax成功应用我的函数之前，如何等待图像加载完毕（如果这就是问题所在！）

JAVASCRIPT

// Get the highest image to use as the minimum Figure <figure> height
function minFigureHeight() {
var imgs = $('.property-image > img');
var maxImgHeight = 0;
  imgs.each(function () {
      var imgHeight = $(this).outerHeight();
      maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight :   imgHeight;
  });
return maxImgHeight
}

// When the window loads add a min-height style to the Figure <figure>
$(window).load(function() {
   var newHeight = minFigureHeight();
   $('.property-image').css("min-height", newHeight);
});

// If the window resizes recalculate and add a min-height style to the Figure <figure>
$(window).resize(function(){
  var newHeight = minFigureHeight();
  $('.property-image').css("min-height", newHeight);
});

函数在成功的ajax调用中运行后的HTML（不工作）

有两间卧室的房子

仅当图像已完全加载时，才尝试调用

minFigureHeight（）

。 没有对此进行测试，但在

success

回调中类似的内容应该可以工作

$('#filter-search').on('change', function(e) {
    e.preventDefault(); // prevent native submit
    $(this).ajaxSubmit({
        target: '#mytarget',
        url: '/search_ajax', 
        type: 'POST',
        success: function() {
            /* 
                Get the prefered image source
                and create an image for preloading.
            */
            var img = $('.property-image > img'),
                src = img.attr('src'),
                image = new Image();
            /* wait for image to be loaded */
            image.onload = function() {
                var newHeight = minFigureHeight();
                $('.property-image').css("min-height", newHeight);           
            };
            /* set the image src */
            image.src = src;

        }
    });  
});

---

两件事：

您的函数在加载图像之前启动。图像是异步加载的，ajax的

成功：

不能确保图像已加载 您需要在函数中使用

load

。然而，由于仅仅在图像上加载并不适用于所有浏览器，下面是一个触发在

complete

上加载的技巧，从而使其与浏览器兼容

var newHeight = minFigureHeight();
$('.property-image img').css("min-height", newHeight);


// Get the highest image to use as the minimum Figure <figure> height
function minFigureHeight() {
var imgs = $('.property-image > img');
var maxImgHeight = 0;

  imgs.one('load',function(){ 
      var imgHeight = $(this).outerHeight();
      maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight :   imgHeight;
  }).each(function() {
      if(this.complete) $(this).load();
  });
return maxImgHeight
}

var newHeight=minFigureHeight（）；
$（'.property image img'）.css（“最小高度”，newHeight）；
//获取最高图像以用作最小地物高度
函数minFigureHeight（）{
var imgs=$（'.property image>img'）；
var maxImgHeight=0；
imgs.one（'load'，function（）{
var imgHeight=$（this.outerHeight（）；
maxImgHeight=maxImgHeight>imgHeight？maxImgHeight:imgHeight；
}).each（函数（{
如果（this.complete）$（this.load（）；
});
返回最大高度
}

演示：

min height

不应该应用于

img

而不是

div

$('#filter-search').on('change', function(e) {
    e.preventDefault(); // prevent native submit
    $(this).ajaxSubmit({
        target: '#mytarget',
        url: '/search_ajax', 
        type: 'POST',
        success: function() {
          var newHeight = minFigureHeight();
          $('.property-image').css("min-height", newHeight);
        }
    });  
});

<article class="property">
  <figure class="property-image" style="min-height: 0px">
    <img src="images/36048_BAO150030_IMG_00.JPG" alt="Any Street" />
  </figure>
  <div class="property-details">
    <p>2 Bedroomed House</p>
  </div>
</article> 

$('#filter-search').on('change', function(e) {
    e.preventDefault(); // prevent native submit
    $(this).ajaxSubmit({
        target: '#mytarget',
        url: '/search_ajax', 
        type: 'POST',
        success: function() {
            /* 
                Get the prefered image source
                and create an image for preloading.
            */
            var img = $('.property-image > img'),
                src = img.attr('src'),
                image = new Image();
            /* wait for image to be loaded */
            image.onload = function() {
                var newHeight = minFigureHeight();
                $('.property-image').css("min-height", newHeight);           
            };
            /* set the image src */
            image.src = src;

        }
    });  
});

var newHeight = minFigureHeight();
$('.property-image img').css("min-height", newHeight);


// Get the highest image to use as the minimum Figure <figure> height
function minFigureHeight() {
var imgs = $('.property-image > img');
var maxImgHeight = 0;

  imgs.one('load',function(){ 
      var imgHeight = $(this).outerHeight();
      maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight :   imgHeight;
  }).each(function() {
      if(this.complete) $(this).load();
  });
return maxImgHeight
}