How to get image size with jquery (Chrome, Safari...)

Question

I am a jquery beginner and I need to get the height of an image by jquery. This is the code I use:

$(document).ready(function ($) { 
  var height = $('#testor').height();
   $('.slider-container').css("height", height);
});

This is the html code:

<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg"   class="alignnone size-medium wp-image-1558 testor" id="testor"  /></div>

<div class="slider-image"><img src="http://xxx.jpg"  class="alignnone size-medium wp-image-1557 testor" /></div>

<div class="slider-image"><img src="http://xxx.jpg"  class="alignnone size-medium wp-image-1556 testor" /></div>
</div>

And the css:

.slider-image {
position: absolute;
width: 100%;
}

.slider-image img{
width: 100%;
height: auto;
}

.inline-block {
display: inline-block;
}

.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}

#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}

#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}

It's working fine with Firefox and IE but not in Chrome and Safari. I found out that it is a problem with webkitbrowser.

Often it is suggested to use $(window).load instead of $(document).ready but that also doesn't work.

Does anyone have an idea how to fix it. I tried for two days to find a solution and don't know what to do now.

Best reagards Mythos

Answer 1

Attach load event to <img> element at .ready(); call .height() within load event handler, as the element may not be fully loaded if .height() is called before load event completes and could return 0

.slider-image {
  position: absolute;
  width: 100%;
}
.slider-image img {
  width: 100%;
  height: auto;
}
.inline-block {
  display: inline-block;
}
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#slider-left {
  position: absolute;
  top: 50%;
  z-index: 1;
}
#slider-right {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
  $(document).ready(function($) {
    $('#testor').on("load", function() {
      var height = $(this).height();
      console.log(this.complete);
      alert(height);
      $('.slider-container').css("height", height);
      console.log(".slider-container height:",
                  $('.slider-container').css("height"));
    })
  });
</script>
<div class="slider-container">
  <button type="button" id="slider-left">Left</button>
  <button type="button" id="slider-right">Right</button>
  <div class="slider-image">
    <img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
  </div>

  <div class="slider-image">
    <img src="" class="alignnone size-medium wp-image-1557 testor" />
  </div>

  <div class="slider-image">
    <img src="" class="alignnone size-medium wp-image-1556 testor" />
  </div>
</div>

Answer 2

$(document).ready(function ($) { 
  var myimage = document.getElementById("testor");
  var w = myimage.width;
  var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});

JSfiddle