✔ jQuery - Bild nachladen und dessen Größe ermitteln

[Sturmrider]

Hallo zusammen,

ich möchte ein Bild mittels click-event in jQuery nachladen:

[...] click( [...]
$('#bildBox').html('<img src="testbild.jpg" id="bild">'+$('#bildBox').html());

und die Bildmaße ermitteln:

alert($('#bild').width());

Komischerweise liefert mir Firefox ZWEI anstelle von EINER Alert-Meldungen. Die Erste mit 24 und die Zweite mit dem richtigen Wert. Safari liefert mir zwei mal 0. Ich habe gelesen, dass es bei Safari und Chrome an der anderen Script-Abarbeitung liegt. Parallelisierung war hier ein Stichwort.

Leider hat html() keine callback-Funktion, da sie >angeblich< synchron arbeitet. Scheinbar stimmt das in diesem Fall aber nicht, sonst gäbe es nicht dieses Problem. (nebenbei gesagt, ich nutze die aktuellste jQuery-Version)
Weiß jemand Rat, wie ich das Problem beheben kann? Ich habe es schon mit ready() und einer onload-Anweisung im img-Tag probiert, leider alles ohne Erfolg.

 

[ComFreek]

Hallo Sturmrider,

folgendes funktioniert bei mir problemlos:

/* #the_div ist ein DIV, der das Bild beinhalten soll */
$("#the_div").html("");
                     
var newImg = new Image;
newImg.src = imgSrc;
newImg.alt = 'Bild';
                     
newImg.onload = function()
{
  alert($(this).width());
}
                     
$("#the_div")[0].appendChild(newImg);

Genau so funktioniert es, wenn ich newImg mit document.createElement("img"); initialisiere.

Siehe auch meinen Vergleich von jQuery.html(), new Image; und createElement(): http://jsfiddle.net/qN7T5/1/

 

[Sturmrider]

Ich glaube das funktioniert soweit. Leider habe ich selbst nicht daran gedacht, das Bild einfach in ein Objekt zu packen und so vor zu laden. Ich hing zu sehr an .html() fest, was damit ja geschickt umgangen wurde.
Eine Frage habe ich aber noch: Mein #the_div ist nicht leer und das Bild wird am Anfang des contents erwartet. Wie setze ich newImg an den Anfang und nicht wie zur Zeit, ans Ende? Ich kenne mich mit appendChild und Co. ehrlich gesagt nicht so gut aus.

 

[ComFreek]

Dafür ist die Methode insertBefore zuständig:

function insertAtBegin(newElem, parent)
{
    var children = obj.childNodes;
    if ( children.length > 0 )
      parent.insertBefore( newElem, children[0] );
}
insertAtBegin( img, $("#the_div")[0] );

Der erste Parameter ist das neue Element,
der zweite Parameter ist das Referenzelement, in unserem Fall das erste Kindelement.

 

[para_noid]

Alternativ: Du könntest das erste Element mit firstChild ermitteln und das Bild dann mit insertBefore davorpacken.

Mich wundert aber ehrlich gesagt, dass dein erster Ansatz nicht funktioniert hat. Hattest du es mal mit dem live-Event probiert?

 

[Sturmrider]

@ComFreek
Deine Funktion funktioniert bei mir irgendwie nicht. Ich habe es aber ähnlich gemacht - so wie para_noid vorgeschlagen hat.

$('#the_div')[0].insertBefore(newImg, $('#the_div')[0].firstChild);

Vielen Dank euch beiden. Damit ist mein das Rätsel wohl gelöst.

@para_noid
Mich wundert es ehrlich gesagt auch... da in der Doku zu html() eindeutig steht, dass es synchron läuft, was meines Wissens nach heißt, dass andere Programmabschnitte erst bearbeitet werden, wenn der HTML-Teil aus html() vollständig geladen ist. Aber sei es drum Bei WebKit-Browsern (das war der Begriff, auf den ich im Zusammenhang mit Chrome und Safari nicht gekommen bin) hätte es wahrscheinlich eh nicht richtig geklappt. Die machen beim dynamischen Nachladen eh manchmal so ihre Probleme

EDIT: Achja, noch ein schönes Wochenende

 

[para_noid]

da in der Doku zu html() eindeutig steht, dass es synchron läuft, was meines Wissens nach heißt, dass andere Programmabschnitte erst bearbeitet werden, wenn der HTML-Teil aus html() vollständig geladen ist

Das wird auch so sein, und wahrscheinlich ist das img-Tag auch bereits da, wenn das alert losgeht. Die Frage ist aber, ob das Bild in der Zeit wirklich im Browser geladen wurde und nun "messbar" ist. Ich schätze, wenn du an der Stelle attr('id') ausgeben würdest, wäre das Ergebnis positiv, weil das Attribut auslesbar ist sobald das Element existiert..


Hab grad gesehen dass es mit Safari & Co. nur mit width als Attribut funktioniert

The width has to be specified in the image code for Chrome/Safari to be able to correctly detect the width. If the image code looks like this:

<img src=”my_super_cool_image.png”>

Firefox and IE will correctly detect the width but Chrome and Safari will return a 0. When you add width=”XXX” then Chrome/Safari will return the XXX value.

[http://api.jquery.com/width/#dsq-comment-message-8331]

Schon blöd wenn eigentlich so hilfreiche Werkzeuge/Bibliotheken bei eher simplen Problemen nicht helfen dir auch n schönes Wochenende