CODEWITHSUNDEEP
jqueryajaximageheight
thatladgavin
thatladgavin

Reputation: 60

jQuery heights on images not possible after ajax

Currently have a function to determine the highest image height to set the minimum height of the image container element, in this case a figure.

The function works fine on window load and if the window is resized. However the result from the function after an ajax call loads content into my target div just returns '0'. I've read that I may be getting image dimensions too quickly which is why it's returning '0' but don't know how to amend properly.

How do I wait until images have loaded before applying my function on ajax success (if that's what the problem is!)?

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 after function is run (Working Correctly)

<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 after function runs on successful ajax call (Not working)

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

Upvotes: 0

Views: 828

Answers (2)

Miro
Miro

Reputation: 8650

Two things:

  1. Your function is firing before your image is loaded. Images are loaded asynchronously and ajax's success: does not ensure that the image has been loaded.

You need to use load in the function. However, since just load on images doesn't work on all browsers, the following is a trick that triggers the load on complete thus making it browser compatible.

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
}

Demo: http://jsfiddle.net/mirohristov/odhanooy/

  1. Shouldn't min-height be applied to the img and not the div?

Upvotes: 1

DavidDomain
DavidDomain

Reputation: 15293

Try to call minFigureHeight() only if the image has been fully loaded. Did not test this but something like this in the success callback should work.

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

        }
    });  
});

Upvotes: 1

Related Questions