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: