obtenir la largeur et la hauteur d’une image dynamic

J’ai un tag img intégré dans un div caché. Lorsque l’utilisateur clique sur un hyperlien dynamic portant le nom de l’image, celle-ci doit être affichée dans une fenêtre modale. Pour positionner la div à l’intérieur de la fenêtre modale, la hauteur de l’image est requirejse. Mais lorsque vous cliquez sur le lien hypertexte, après que la source a été atsortingbuée, la hauteur arrive à 0. Par conséquent, l’image ne peut pas être alignée au milieu. Aidez-moi à obtenir la largeur de l’image avant qu’elle ne soit affichée dans le navigateur.

 function ShowImage(imgSrc) { $("#imgFull").attr("src", imgSrc); alert($("#imgFull").height()); $("#imgFullView").width($("#imgFull").width()); $("#imgFullView").height($("#imgFull").height()); show_modal('imgFullView', true); } 

Cette méthode showimage serait appelée onclick du lien hypertexte. Merci d’avance…

Une solution qui a fonctionné pour moi, après toutes vos recommandations professionnelles …

  function ShowImage(imgSrc) { $("#imgFull").removeAttr("src"); //To remove the height and width of previously showed imaged from img tag. $("#imgFull").attr("src", imgSrc); $("#imgFullView").width(document.getElementById("imgFull").width); $("#imgFullView").height(document.getElementById("imgFull").height); show_modal('imgFullView', true); } 

essaye ça.

  var img = $("imgFull")[0]; // Get my img elem var real_width, real_height; $("") // Make in memory copy of image to avoid css issues .attr("src", $(imgFull).attr("src")) .load(function() { real_width = this.width; // Note: $(this).width() will not real_height = this.height; // work for in memory images. }); 

Merci.

Mmmm, le problème est que vous ne pouvez pas connaître la taille d’une image qui n’a pas encore été chargée. Essaye ça:

 function ShowImage(imgSrc) { $("#imgFull").attr("src", imgSrc); $("#imgFull").load(function(){ //This ensures image finishes loading alert($("#imgFull").height()); $("#imgFullView").width($("#imgFull").width()); $("#imgFullView").height($("#imgFull").height()); show_modal('imgFullView', true); }); } 

Avec .load() nous nous assurons que l’image termine son chargement avant d’essayer d’obtenir sa taille ()

J’espère que cela t’aides. À votre santé

Cela avait fonctionné pour moi, par le passé:

 function ShowImage(imgSrc){ $('').bind('load', function(){ if ( !this.complete || this.naturalWidth == 0 ) { $( this ).sortinggger('load'); } else { $( this ).appendTo('#imgFullView') $('#imgFullView').width(this.naturalWidth).height(this.naturalHeight); } }).attr("src",imgSrc); } $(document).ready(function(){ ShowImage('http://soffr.miximages.com/jquery/ps_logo2.png') }); 

démo ici:

http://jsfiddle.net/jyVFc/4/