Question

目前有一个函数来确定最高图像高度来设置图像容器元素的最小高度，在本例中是一个数字。

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

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

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

Answer 1

仅在minFigureHeight()已满载时尝试致电image。没有测试过，但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;

        }
    });  
});

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

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

2 个答案: