jQuery - Breite/ Höhe dynamisch geladener Bilder auslesen

[BoR]

Hallo,
ich habe folgendes Problem. Hier erstmal ein kurzer HTML-Code:

<div id="galerie">
      <img class="..." src="…" data-big="..." alt="..." title="..." />
</div>

Hier das Stylesheet:

#bildBig
{
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 20px;
	border: 1px solid #FFF;
        opacity: 0.0
}

Und zu guter Letzt der jQuery-Code:

function ausrichtung()
{
      var bBreite = $("#bildBig").width(),
	    bHoehe = $("#bildBig").height(),
	    bBorder = parseInt($("#bildBig").css("border-width")),
	    bPadd = parseInt($("#bildBig").css("padding"));
			
      var mt = -(bHoehe / 2) - bBorder - bPadd,
            ml = -(bBreite / 2) - bBorder - bPadd;
			
      $("#bildBig").css("margin-top", mt).css("margin-left", ml).animate({opacity: "1.0"}, 500);
};

$(document).on("click", "#galerie img", function()
{
      var verweis = $(this).attr("data-big");
		
      $("body").append('<div id="container"></div>');
			
      var img = new Image();	

      img.src = verweis;
      $(img).load(function() 
      {
            $("#container").append('<img id="bildBig" src="'+verweis+'" alt="..." />');
	    ausrichtung();
      });
});

Wie im HTML-Teil zu sehen, habe ich ein eigenes Attribut "data-big" angelegt, in dem der Pfad zu dessen großem Bruder liegt. Das Bild ist also nur ein Vorschaubild. Die CSS dient dem späteren Laden dieses Bildes und beinhaltet soweit alle allgemeinen Einstellungen, die ich benötige. Mittels jQuery lade ich nun die große Version des Bildes nach, sobald auf das Vorschaubild geklickt wird. Das Bild wird geladen, danach in den gewünschten Container gelegt und erhält die CSS-Eigenschaften. Lasse ich das ganze in Chrome laufen, wird das Bild auch wunderbar zentriert. In Safari oder auch Firefox kriege ich beim Auslesen der Breite und der Höhe des Bildes immer 0 zurückgegeben. Weiss jemand zufällig einen Rat? Eine feste Höhe und Breite könnte ich natürlich eingeben, aber es wäre doch schon deutlich entspannter es durch JavaScript auslesen zu lassen und entsprechend dem Monitor zu skalieren, anstatt jedem Bild seine eigene Höhe und Breite in den Code zu schreiben. Zumal die Bilder alle unterschiedliche Formate haben.

Lege ich eine Funktion an, die mir bei Klick auf das nun sichtbare, große Bild die Höhe und Breite zurückgibt, wird dies auch getan.

Gruß Lars

 

[BoR]

Nach unzähligen Versuchen, habe ich nun doch eine Möglichkeit gefunden, die das Problem in den Griff bekommt. Ich habe diverse Versuche unterstützend (mit stackoverflow) gestartet und möglicherweise liegt es am Cache. Ich kann es aber nicht genau sagen. Jedenfalls musste ich die Funktion "ausrichtung()" etwas anpassen bzw. erweitern.

var klon = $("#bildBig").clone();

$("#menu").append(klon);
var bBreite = klon.get(0).width,
      bHoehe = klon.get(0).height;
klon.remove();

Der Container "#menu" ist unsichtbar und existiert bereits wegen einiger canvas-Elemente, die ich verwende. Ich erstelle eine Kopie von "#bildBig", lege diese in den unsichtbaren Container, erhalte über .get() den DOM-Knoten und kann somit direkt mittels JavaScript die Breite und Höhe der Kopie auslesen und lösche diese danach. Das ist zwar etwas umständlich, hilft mir aber erstmal weiter. Sollte jemand eine elegantere Möglichkeit kennen, darf er/sie mir gerne die Lösung verraten.

Feierabend für heute