jQuery: Das neue Image, das zu DOM hinzugefügt wurde, hat nach dem Laden immer die Breite 0

9

Ich muss die Abmessungen eines Bildes mithilfe eines dynamisch erstellten Bild-Tags ermitteln. Es klappt. NUR mit attr ('width') und NUR, wenn ich das Bild NICHT zum DOM hinzufüge. Andernfalls sind die zurückgegebenen Dimensionen null. Warum? :)

%Vor%

Also erzeuge ich das Bild, füge es dem DOM hinzu und definiere eine Handler-Funktion, die aufgerufen wird, wenn das Bild geladen wird. Ich benutze einen Verschluss, um ihm einen Verweis auf das ursprüngliche Objekt zu geben, das innerhalb des Verschlusses "self" genannt wird. Ich speichere die URL des Bildes, um sicherzustellen, dass die Referenz in Ordnung ist. Ausgabe ist:

%Vor%

Hier ist das seltsame Ding: Wenn ich die zweite Zeile oben (das appendTo) entferne, dann funktioniert es plötzlich, aber nur für attr ('width'):

%Vor%

Dieses Verhalten ergibt für mich keinen Sinn. Ich würde erwarten, die tatsächliche Bildgröße in allen sechs oben genannten Fällen zu erhalten. Ich weiß jetzt, wie ich das Problem lösen kann, aber ich würde gerne verstehen, warum es passiert. Ist es ein Fehler? Oder gibt es einen logischen Grund dafür?

Die obigen Ergebnisse beziehen sich auf Safari. Ich habe gerade mit Chrome getestet und im ersten Beispiel habe ich alle korrekten Werte erhalten, aber im zweiten Beispiel immer noch zwei Nullen. Sehr seltsam.

    
travelboy 07.12.2010, 23:42
quelle

4 Antworten

3

Ich habe eine zuverlässige Lösung für Safari gefunden:

  • Erstellen Sie das Bild
  • Fügen Sie den load () - Handler
  • an
  • Setzen Sie erst danach das src -Attribut !!

Ich verstehe immer noch nicht, warum die Breite jemals null zurückgeben sollte, aber es scheint, dass unerwartete Dinge passieren, wenn Sie den Last-Handler erst nach dem Setzen des src anhängen. Ich habe diese Idee nur, weil ich ein weiteres Problem mit IE (die nicht einmal den Load Handler aufgerufen hat, da es das geladene Bild vor dem Anhängen des Handlers betrachtet hat), also die Lektion, die ich gelernt habe, ist immer Dinge in tun Reihenfolge wie oben beschrieben.

    
travelboy 11.12.2010, 03:37
quelle
2

hat Ihren Code in Firebug und Chrome versucht und verhält sich wie erwartet:

%Vor%

hat Folgendes:

%Vor%

Nachdem ich die appendTo() -Zeile entfernt habe, kann ich das Verhalten in Chrome reproduzieren, aber ich finde es nicht komisch. width() berechnet die tatsächliche Breite für das "angezeigte" Element - z. Immer wenn Sie das Bild in ein verstecktes Div setzen, wird es == 0!

Versuchen Sie, die Zeile appendTo durch die folgenden zu ersetzen, und Sie erhalten dasselbe:

this.img.appendTo( $('<div/>').css('display', 'none') );

UPDATE:

Die Ergebnisse von Safari 3.1.2 verhalten sich für mich genauso wie Chrome, wenn sie an DOM angehängt werden.

Wenn IMG nicht in das DOM eingefügt wird, bekomme ich auch akzeptable Ergebnisse (keine Seltsamkeit):

%Vor%

Ich bin überzeugt, dass es etwas Einzigartiges in Ihrem Setup geben muss ... oder es ist ein Safari @ Mac OSX-Fehler (versuchte Safari unter Windows env).

    
kares 10.12.2010 17:11
quelle
0
___ answer4415058 ___

Ich habe eine zuverlässige Lösung für Safari gefunden:

  • Erstellen Sie das Bild
  • Fügen Sie den load () - Handler
  • an
  • Setzen Sie erst danach das %code% -Attribut !!

Ich verstehe immer noch nicht, warum die Breite jemals null zurückgeben sollte, aber es scheint, dass unerwartete Dinge passieren, wenn Sie den Last-Handler erst nach dem Setzen des src anhängen. Ich habe diese Idee nur, weil ich ein weiteres Problem mit IE (die nicht einmal den Load Handler aufgerufen hat, da es das geladene Bild vor dem Anhängen des Handlers betrachtet hat), also die Lektion, die ich gelernt habe, ist immer Dinge in tun Reihenfolge wie oben beschrieben.

    
___ qstnhdr ___ jQuery: Das neue Image, das zu DOM hinzugefügt wurde, hat nach dem Laden immer die Breite 0 ___ answer4411445 ___

hat Ihren Code in Firebug und Chrome versucht und verhält sich wie erwartet:

%Vor%

hat Folgendes:

%Vor%

Nachdem ich die %code% -Zeile entfernt habe, kann ich das Verhalten in Chrome reproduzieren, aber ich finde es nicht komisch. %code% berechnet die tatsächliche Breite für das "angezeigte" Element - z. Immer wenn Sie das Bild in ein verstecktes Div setzen, wird es == 0!

Versuchen Sie, die Zeile appendTo durch die folgenden zu ersetzen, und Sie erhalten dasselbe:

%code%

UPDATE:

Die Ergebnisse von Safari 3.1.2 verhalten sich für mich genauso wie Chrome, wenn sie an DOM angehängt werden.

Wenn IMG nicht in das DOM eingefügt wird, bekomme ich auch akzeptable Ergebnisse (keine Seltsamkeit):

%Vor%

Ich bin überzeugt, dass es etwas Einzigartiges in Ihrem Setup geben muss ... oder es ist ein Safari @ Mac OSX-Fehler (versuchte Safari unter Windows env).

    
___ antwort4383331 ___

Ich glaube nicht, dass Ihre Schließung so funktioniert, wie Sie es wollen. Hast du etwas versucht wie:

%Vor%     
___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ tag123image ___ Das Bild-Tag ist für Fragen im Zusammenhang mit dem Laden, Formatieren, Speichern, Komprimieren und Anzeigen von Bildern im Kontext des Quellcodes gedacht. Dieses Tag sollte auch zur Unterstützung verschiedener Bildbibliotheken verwendet werden. Fragen zu bestimmten Bildformaten sollten die Tags für diese Formate enthalten. ___ qstntxt ___

Ich muss die Abmessungen eines Bildes mithilfe eines dynamisch erstellten Bild-Tags ermitteln. Es klappt. NUR mit attr ('width') und NUR, wenn ich das Bild NICHT zum DOM hinzufüge. Andernfalls sind die zurückgegebenen Dimensionen null. Warum? :)

%Vor%

Also erzeuge ich das Bild, füge es dem DOM hinzu und definiere eine Handler-Funktion, die aufgerufen wird, wenn das Bild geladen wird. Ich benutze einen Verschluss, um ihm einen Verweis auf das ursprüngliche Objekt zu geben, das innerhalb des Verschlusses "self" genannt wird. Ich speichere die URL des Bildes, um sicherzustellen, dass die Referenz in Ordnung ist. Ausgabe ist:

%Vor%

Hier ist das seltsame Ding: Wenn ich die zweite Zeile oben (das appendTo) entferne, dann funktioniert es plötzlich, aber nur für attr ('width'):

%Vor%

Dieses Verhalten ergibt für mich keinen Sinn. Ich würde erwarten, die tatsächliche Bildgröße in allen sechs oben genannten Fällen zu erhalten. Ich weiß jetzt, wie ich das Problem lösen kann, aber ich würde gerne verstehen, warum es passiert. Ist es ein Fehler? Oder gibt es einen logischen Grund dafür?

Die obigen Ergebnisse beziehen sich auf Safari. Ich habe gerade mit Chrome getestet und im ersten Beispiel habe ich alle korrekten Werte erhalten, aber im zweiten Beispiel immer noch zwei Nullen. Sehr seltsam.

    
___ tag123jquery ___ jQuery ist eine beliebte Cross-Browser-JavaScript-Bibliothek, die das DOM-Traversal (Document Object Model), die Ereignisbehandlung, Animationen und AJAX-Interaktionen erleichtert, indem die Diskrepanzen zwischen Browsern minimiert werden. Eine mit jQuery gekennzeichnete Frage sollte mit jQuery in Zusammenhang stehen, daher sollte jquery von dem fraglichen Code verwendet werden, und mindestens eine jquery-nutzungsbezogene Elemente müssen in der Frage enthalten sein. ___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123dimensions ___ Dimensionen eines Arrays definieren seine Größe und Form - die Anordnung der Elemente im Array. Verwenden Sie dieses Tag für Fragen zur Form von Arrays. ___ antwort4383039 ___

Mir scheint, dass die Art und Weise, wie Sie das jQuery-Objekt zuweisen und dann die load-Funktion auf dem Bild aufrufen, ein bisschen übertödlich ist, was es schwer macht zu verstehen, warum sich jQuery so verhält.

Versuchen Sie Folgendes:

%Vor%

Funktioniert perfekt für mich, um es einfach zu bekommen, nachdem das Bild in das DOM injiziert wurde.

Du könntest das auch versuchen:

%Vor%     
___
UpHelix 08.12.2010 00:14
quelle
0
___ answer4415058 ___

Ich habe eine zuverlässige Lösung für Safari gefunden:

  • Erstellen Sie das Bild
  • Fügen Sie den load () - Handler
  • an
  • Setzen Sie erst danach das %code% -Attribut !!

Ich verstehe immer noch nicht, warum die Breite jemals null zurückgeben sollte, aber es scheint, dass unerwartete Dinge passieren, wenn Sie den Last-Handler erst nach dem Setzen des src anhängen. Ich habe diese Idee nur, weil ich ein weiteres Problem mit IE (die nicht einmal den Load Handler aufgerufen hat, da es das geladene Bild vor dem Anhängen des Handlers betrachtet hat), also die Lektion, die ich gelernt habe, ist immer Dinge in tun Reihenfolge wie oben beschrieben.

    
___ qstnhdr ___ jQuery: Das neue Image, das zu DOM hinzugefügt wurde, hat nach dem Laden immer die Breite 0 ___ answer4411445 ___

hat Ihren Code in Firebug und Chrome versucht und verhält sich wie erwartet:

%Vor%

hat Folgendes:

%Vor%

Nachdem ich die %code% -Zeile entfernt habe, kann ich das Verhalten in Chrome reproduzieren, aber ich finde es nicht komisch. %code% berechnet die tatsächliche Breite für das "angezeigte" Element - z. Immer wenn Sie das Bild in ein verstecktes Div setzen, wird es == 0!

Versuchen Sie, die Zeile appendTo durch die folgenden zu ersetzen, und Sie erhalten dasselbe:

%code%

UPDATE:

Die Ergebnisse von Safari 3.1.2 verhalten sich für mich genauso wie Chrome, wenn sie an DOM angehängt werden.

Wenn IMG nicht in das DOM eingefügt wird, bekomme ich auch akzeptable Ergebnisse (keine Seltsamkeit):

%Vor%

Ich bin überzeugt, dass es etwas Einzigartiges in Ihrem Setup geben muss ... oder es ist ein Safari @ Mac OSX-Fehler (versuchte Safari unter Windows env).

    
___ antwort4383331 ___

Ich glaube nicht, dass Ihre Schließung so funktioniert, wie Sie es wollen. Hast du etwas versucht wie:

%Vor%     
___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ tag123image ___ Das Bild-Tag ist für Fragen im Zusammenhang mit dem Laden, Formatieren, Speichern, Komprimieren und Anzeigen von Bildern im Kontext des Quellcodes gedacht. Dieses Tag sollte auch zur Unterstützung verschiedener Bildbibliotheken verwendet werden. Fragen zu bestimmten Bildformaten sollten die Tags für diese Formate enthalten. ___ qstntxt ___

Ich muss die Abmessungen eines Bildes mithilfe eines dynamisch erstellten Bild-Tags ermitteln. Es klappt. NUR mit attr ('width') und NUR, wenn ich das Bild NICHT zum DOM hinzufüge. Andernfalls sind die zurückgegebenen Dimensionen null. Warum? :)

%Vor%

Also erzeuge ich das Bild, füge es dem DOM hinzu und definiere eine Handler-Funktion, die aufgerufen wird, wenn das Bild geladen wird. Ich benutze einen Verschluss, um ihm einen Verweis auf das ursprüngliche Objekt zu geben, das innerhalb des Verschlusses "self" genannt wird. Ich speichere die URL des Bildes, um sicherzustellen, dass die Referenz in Ordnung ist. Ausgabe ist:

%Vor%

Hier ist das seltsame Ding: Wenn ich die zweite Zeile oben (das appendTo) entferne, dann funktioniert es plötzlich, aber nur für attr ('width'):

%Vor%

Dieses Verhalten ergibt für mich keinen Sinn. Ich würde erwarten, die tatsächliche Bildgröße in allen sechs oben genannten Fällen zu erhalten. Ich weiß jetzt, wie ich das Problem lösen kann, aber ich würde gerne verstehen, warum es passiert. Ist es ein Fehler? Oder gibt es einen logischen Grund dafür?

Die obigen Ergebnisse beziehen sich auf Safari. Ich habe gerade mit Chrome getestet und im ersten Beispiel habe ich alle korrekten Werte erhalten, aber im zweiten Beispiel immer noch zwei Nullen. Sehr seltsam.

    
___ tag123jquery ___ jQuery ist eine beliebte Cross-Browser-JavaScript-Bibliothek, die das DOM-Traversal (Document Object Model), die Ereignisbehandlung, Animationen und AJAX-Interaktionen erleichtert, indem die Diskrepanzen zwischen Browsern minimiert werden. Eine mit jQuery gekennzeichnete Frage sollte mit jQuery in Zusammenhang stehen, daher sollte jquery von dem fraglichen Code verwendet werden, und mindestens eine jquery-nutzungsbezogene Elemente müssen in der Frage enthalten sein. ___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123dimensions ___ Dimensionen eines Arrays definieren seine Größe und Form - die Anordnung der Elemente im Array. Verwenden Sie dieses Tag für Fragen zur Form von Arrays. ___ antwort4383039 ___

Mir scheint, dass die Art und Weise, wie Sie das jQuery-Objekt zuweisen und dann die load-Funktion auf dem Bild aufrufen, ein bisschen übertödlich ist, was es schwer macht zu verstehen, warum sich jQuery so verhält.

Versuchen Sie Folgendes:

%Vor%

Funktioniert perfekt für mich, um es einfach zu bekommen, nachdem das Bild in das DOM injiziert wurde.

Du könntest das auch versuchen:

%Vor%     
___
jabbie 08.12.2010 01:16
quelle