Jquery getting zero width on images

Question

I'm having an issue with jquery width();

Html markup:

<img height="300px" src="http://localhost/portfolio/wp-content/uploads/Alone.jpg" alt="Alone" title="Alone" />

Jquery:

var slide_width = 0;
    $("#barely_slide article img").each(function(){
        console.dir($(this).width());
    });
    console.dir(slide_width);

Looking at $(this) I see clientWidth returns correct value, also offsetWidth, but these have no equivalent jquery functions.

Answer 1

Wrap your function calls with this:

(function($) {

  $(document).ready(function() {
    //Here you can manupilate the dom. Images are not loaded yet.
  });

  $(window).load(function() {
    //Here you can check for image widths.
  });

})(jQuery);

You can check for client width with:

$(window).width();

and for your document width with:

$(document).width();

Answer 2

Get the width after the images have been loaded:

$("#barely_slide article").on('load', 'img', function(){
    console.dir($(this).width());
});

Answer 3

I think you should make sure your image is loaded by the browser, and you can try to do the following:

 $(document).ready(function(){ 
     var slide_width = 0;
     $("#barely_slide article").find("img").each(function(){
          console.dir($(this).width());
     });
     console.dir(slide_width);
 });