Tach!
function checkSize(image) { var img = new Image(); img.onload = function() { console.info(this.width); }; img.src = image.attr('src'); return img.width; } var width=checkSize($('img#einBild'));
Das scheint zu funktionieren. Irgendwelche Bedenken?
EDIT: Doch nicht. :( Beim ersten Aufruf ist die Breite 0 ... Bedingt durch den Cache gab es die richtige Ausgabe. :(
Es ist immer noch das alte Zeit-Problem. Die Anweisung img.src = ... wartet nicht. Die nächste Anweisung wird sofort ausgeführt, und da ist das Laden aber noch nicht fertig.
Du musst diese zeitlichen Abhängigkeiten unbedingt verstehen und berücksichtigen, sonst wird das nie was werden mit den asynchronen Abläufen. Und die kannst du auch nicht wegignorieren.
Es gibt zwei generelle Wege. Der eine ist, du lässt dir eine Callback-Funktion übergeben, die du dann aufrufst, wenn das Ereignis stattfand. Aber auch hier musst du bachten, dass diese Funktion erst später aufgerufen wird, und alles was auf das Ergebnis angewiesen ist, auch erst zu diesem Später-Zeitpunkt laufen darf.
Der zweite Weg hört auf den Namen Promise. Das ist ein generelles Lösungsmuster für dieses Problem mit der Asynchronität.
Vielleicht hast du schon einmal Ajax mit jQuery gemacht, da gibt es beide Wege. Der erste ist Callback-Übergabe und ist recht bekannt. Neuerdings kann man aber auch das Promise-Muster verwenden.
Ohne Anspruch auf syntaktische Richtigkeit zunächst mal die Callback-Methode:
$ajax({
data: parameter,
success: function (...) { /* callback bei Erfolg */ },
error: function (...) { /* callback bei Fehler */ }
});
Von der Promise-Methode sieht man nur einen Teil:
$ajax({
data: parameter
})
.done(function () { /* callback bei Erfolg */ })
.fail(function () { /* callback bei Fehler */ });
Das ist der Teil der Verwendung. Du brauchst noch den anderen Teil, das Erzeugen des Promises und die Erfüllung beziehungsweise Zurückweisung im Fehlerfall. Ich verweise statt langer Erklärung erstmal auf das Promise-Beispiel im MDN.
dedlfix.