2009-10-29 8 views
16

imagen natural Ancho devuelve cero ... eso es todo, ¿por qué?imagen natural Ancho retorno cero

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

AYUDA, no sé por qué!

*** esa ruta es buena, la imagen aparece!

Respuesta

34

supongo que es porque usted no está esperando a que se cargue la imagen - intente esto:

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

El orden en el que '' src' y onload' se establecen es importante para la devolución de llamada de carga a ser llamado. –

+0

Hmm Probé en Chrome y Firefox y ambos funcionaron bien. IE mostró la alerta también, pero no es compatible con naturalWidth – Greg

+0

¡Muchas gracias! Funcionó como un amuleto –

0

Las propiedades naturalWidth y naturalHeight no se admiten en el IE, por lo que darle una oportunidad this fix.

+0

¿qué hay del ancho y la altura "normal" – menardmam

2

aquí es el CODIGO DE TRABAJO FINAL .... en caso de que alguien whant a saber, que todo es cuestión de wainting tener todas las imágenes cargadas! ...

<script type="text/javascript"> 

$ (function() { $ ("# pulgar") jCarouselLite ({ btnNext: "#down", btnPrev: "#UP", verticales: true, visibles: 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});}); 

    } 

}) 

. });

0

Para mí las siguientes obras ...

$('<img src="mypathtotheimage.png"/>').load(function() { 

     if (!isNotIe8) { 
      // ie8 need a fix 
      var image = new Image(); // or document.createElement('img') 
      var width, height; 
      image.onload = function() { 
       width = this.width; 
       height = this.height; 
      }; 
      image.src = $(this).attr("src"); 

     } else { 
      // everythings fine here .... 
      // this.naturalWidth/this.naturalHeight; 
     } 
Cuestiones relacionadas