ajax 后图像上的 jQuery 高度无法实现答案

【问题标题】：jQuery heights on images not possible after ajaxajax 后图像上的 jQuery 高度无法实现
【发布时间】：2015-07-13 02:04:37
【问题描述】：

目前有一个确定图片最高高度的功能来设置图片容器元素的最小高度，本例为图形。

该函数在窗口加载和调整窗口大小时可以正常工作。但是，在 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);
});

HTML

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

函数运行后的 HTML（正常工作）

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

AJAX

$('#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);
        }
    });  
});

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

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

【问题讨论】：

标签： jquery ajax image height

【解决方案1】：

仅当 image 已满载时才尝试调用 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;

        }
    });  
});

【讨论】：

【解决方案2】：

两件事：

您的函数在加载图像之前触发。图片是异步加载的，ajax 的success: 并不能保证图片已经加载。

您需要在函数中使用load。但是，由于图像上的 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
}

演示： http://jsfiddle.net/mirohristov/odhanooy/

不应该将min-height 应用于img 而不是div？

【讨论】：