Set height of div equal to height of image

Question

So I've been banging my head on this for a long time but can't seem to get it to work. I've read similar questions and tried their answers but they're not working for me so here I am.

I have a slider and it contains some tags, I wanna set the container div's height equal to the height of the image. Firstly here's the html:

<section class="row" id="carousel">
    <ul class="rslideshow"> <!-- Images appear here -->
      <li><img src="../img/image1.jpg" alt=""></li>
      <li><img src="../img/image2.jpg" alt=""></li>
      <li><img src="../img/image3.jpg" alt=""></li>
      <li><img src="../img/image4.jpg" alt=""></li>
      <li><img src="../img/image5.jpg" alt=""></li>
    </ul>
</section>

This was the first code I tried:

function setHeight(ab){
        var heightImage = $('.rslideshow > li:first-child > img').height();
        ab.height(heightImage);
        console.log(heightImage);
    }
    setHeight($('.rslideshow'));
    $(window).resize(function() {
        setHeight($('.rslideshow'));
    });

The problem was that the image's height was being calculated to 0. The reason was document.ready triggers as soon as the DOM tree is ready. At this time, the images are not loaded yet. SO I tried delays with setTimeout but it didn't work and was not reliable anyway. Next, I tried using jquery's onLoad like this:

function setHeight(ab){
    var target = $('.rslideshow > li:first-child > img'),
        heightImage = 200;

    target.on('load', function(){
        heightImage = $(this).height();
        console.log(heightImage);
        ab.height(heightImage);
    });

}
setTimeout(setHeight($('.rslideshow')), 500);
$(window).resize(function() {
    setHeight($('.rslideshow'));
});

This on seemed to work but for some reason, onLoad doesn't trigger on window.resize. I also read on Jquery's website the onLoad is not reliable and cross browser.

So here is where I'm stuck. Any Ideas? I'm open to non javascript solutions too.

Answer 1

Use complete or readyState JavaScript attribute of the img element like the following code snippets.

$(function () {
    function setHeight(ab) {
        var target = $('.rslideshow > li:first-child > img'),
            heightImage;
        if (target[0].complete || target[0].readyState === 4) {
            heightImage = target.height();
            ab.height(heightImage);
        }
        else {
            target.on('load', function () {
                heightImage = $(this).height();
                console.log(heightImage);
                ab.height(heightImage);
            });
        }
    }
    setHeight($('.rslideshow'));
    $(window).resize(function () {
        setHeight($('.rslideshow'));
    });
});

Explanation:

complete - Returns whether or not the browser is finished loading an image.

readyState - While using Image Element constructor or triggering onreadystatechange event of AJAX, we can use readyState property. Please check the readyState details below.

State  Details

0      Request is not initialized
1      Connected with server
2      Request has been sent
3      Request is in process
4      Request is completed

Hope this helps!

Answer 2

Have a look at this pen :

Html

<section class="row" id="carousel">
<ul class="rslideshow" stlye="list-style-type: none !important;"> <!-- Images appear here -->
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
  <li><img src="https://placehold.it/350x150" alt=""></li>
</ul>
</section>

Javascript:

$(window).load(function() {

   setHeight($('.rslideshow'));  

})

function setHeight(ab) {
  var target = $('.rslideshow > li:first-child > img'),
    heightImage = 50;

  target.on('load', function() {
    ab.height(heightImage);
  });

}
$(window).resize(function() {
  setHeight($('.rslideshow'));
});

Note the use of the $(window).load(function() {});

This gets fired once all content on the dom is loaded, this means the images will exist before the script runs.

Also your 'setTimeout' method is incorrect. It needs to passed through a function eg:

setTimeout(function() {

    // Run timeout function here

}, 500);

Answer 3

You may want to use $('img').one() to get the image load event callback and use complete attribute of img element in case the image is loaded from cache.

Example:

$(function(){
    //Page Loaded
  $("img").one("load", function() {
    //Image Loaded (Your handling here)
  }).each(function() {
    //Trigger Image load event if image already loaded when page loaded
    if(this.complete) $(this).load();
  });
});

JS Fiddle Example: http://jsfiddle.net/5chcgbLc/2/