image naturalWidth return zero

Question

image naturalWidth return zero... that's it, why ?

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage.substring(14,17) + '-a.jpg'; 
var width = newimage.naturalWidth;
alert (width);

HELP, i dont know why !

*** that path is good, the image show up !

Answer 1

I'd guess it's because you're not waiting for the image to load - try this:

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage.substring(14,17) + '-a.jpg'; 
newimage.onload = function()
{
    var width = this.naturalWidth;
    alert(width);
}

Answer 2

The naturalWidth and naturalHeight properties are not supported in IE, so give this fix a try.

Answer 3

here is the FINAL WORKING CODE.... in case somebody whant to know, it all a matter of wainting to have all the images loaded !...

<script type="text/javascript">

$(function() { $("#thumb").jCarouselLite({ btnNext: "#down", btnPrev: "#up", vertical: true, visible: 4 });

$("#thumb li img").click(function() {

 var newlinkimage = $(this).attr("src");
 newlinkimage = 'retouche-hr' + newlinkimage.substring(14,17);

 $('#hr').remove();

 var newimage = new Image();
 newimage.src = newlinkimage + '-a.jpg';

 newimage.onload = function()
 {
  var width = (newimage.width);
  var height = (newimage.height);

  $('#contentfull').append('<div id="hr"> </div>');
  $("#hr").attr("width", width).attr("height", height);
  $("#hr").addClass('hrviewer');
  //alert('a');
  $("#hr").append('<div id="avant"> <img alt="before" src="' + newlinkimage +'-a.jpg"></div>');
  $("#hr").append('<div id="apres"> <img alt="after" src="' + newlinkimage +'-b.jpg"></div>');
  //alert('b');
  $("#avant img").attr("src", newlinkimage + '-a.jpg').attr("width", width).attr("height", height);
  $("#apres img").attr("src", newlinkimage + '-b.jpg').attr("width", width).attr("height", height);

  $("#apres img").load(function(){$("#hr").beforeAfter({animateIntro:true});}); 

 }

})

});