jquery Bildgröße

Question

Ich erstelle eine Fotogalerie mit jquery. Ich nehme und verkleinere die Bilder beim Laden, um Thumbnails zu erstellen. Ich möchte den ursprünglichen Wert der Bildgröße erhalten, damit ich ihn später wieder auf seine ursprüngliche Größe bringen kann. Weiß jemand, wie man das macht? Ich habe folgenden Code:

obj.find("img").each(function(){ 
}); 

Dies führt eine Schleife durch alle Bilder im Container div. Ich habe dann versucht zu tun:

$(this).width(); //didnt work 
this.width; //didnt work 

irgendwelche Ideen?

Answer 1

Ich fragte kürzlich the same question und bekam eine gute Antwort: Ein neues Bildelement wird erstellt, aber nicht an das DOM angehängt. Seine Höhe und Breite sind die ursprünglichen Abmessungen des Bildes.

Bearbeiten: Ich habe die Antwort auf meine Frage jetzt wie versprochen in den Kommentaren bearbeitet. Die Erkennung der Bildgröße ist jetzt an das onload Ereignis des Bildes gebunden, um zuverlässige Ergebnisse zu garantieren.

Answer 2

Wenn ein Element versteckt ist nicht seine Größe bekommen kann, wenn man vor seiner Breite oder Höhe bekommen zeigt es, müssen Sie eine negative wie

#your_image {left:-1000%;}

Offset geben nur dann

$(this).width()

werden Sie das Ergebnis zurück.

Answer 3

Das Problem bei der Verwendung von jQuery zum Abrufen der Bildgröße ist, dass wir normalerweise $() verwenden. Ready (function()); um unser JavaScript auszuführen, aber an diesem Punkt lädt die Seite, das Bild ist noch nicht geladen, also müssen Sie darauf warten, dass das zuerst passiert. Sobald Sie sicher sind, dass das Bild geladen ist und das Bild sichtbar ist, können Sie $ .width() und $ .height() wie gewohnt verwenden.

Eine Sache, die Sie auch versuchen könnten, wenn Sie eine Skriptsprache verwenden, um Ihre Bildgrößen zu generieren, besteht darin, die Breiten- und Höhenattribute nach dem Lesen der Datei zu setzen und die Größe auf diese Weise zu erhalten. Da du eine Galerie erstellst, solltest du deine Bilder im Backend mit imagemagick von gd für php anpassen. Es gibt viele Online-Dokumentationen für diese Tools, daher werde ich hier nicht näher darauf eingehen.

Answer 4

$("#your_img").imagesLoaded(function(){<br> 
alert($(this).width());<br> 
alert($(this).height());<br> 
});