element Breite ist undefiniert auf Dokument bereit

Ich versuche zu erhalten ein element Breite mit dem folgenden code direkt vor der </body>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        var diff = $('div.canvas img.photo').get(1).width;
        console.log(diff);
    });
</script>

aber es loggt nicht definiert. Allerdings, wenn ich $('div.canvas img.photo').get(1).width direkt in das Chrome/Firebug-Konsole, es gibt die richtige Breite. Das Bild wird nicht geladen mit Javascript, also sollte, wenn das Dokument fertig feuert. Was mache ich falsch?

Hinzufügen console.log(diff); zwischen den beiden Linien und du wirst sehen was falsch ist.
Fuzz: console.log(diff.width); // sieht Tippfehler
Ooops, jetzt editiert.
Warum verwenden Sie $('div.canvas img.photo').get(1).width und nicht $('div.canvas img.photo').eq(1).width() ?

InformationsquelleAutor Mild Fuzz | 2012-01-31

6

Nein, das sollte nicht sein. Dokument.bereit feuert, wenn alle HTML geladen wurde, aber nicht die Bilder. Wenn Sie möchten, zu warten, bis alle Bilder geladen sind, verwenden Fenster.Last.

Beispiel:
```
$(window).load(function(){
    var diff = $('div.canvas img.photo').get(1).width;
    console.log(diff);
});
```
Auch, wie einige Leute haben darauf hingewiesen, Sie waren der Versuch, die Eigenschaft ".Breite" zweimal.

Wenn überhaupt möglich, richten Sie eine Breite auf, die imagetags in CSS. So können Sie sicher verwenden-Dokument.bereit für Ihren code. Mit Fenster.die Last wird natürlich verzögern die Ausführung des Skripts, könnte eine zweite sein könnte, zehn, je nach der Geschwindigkeit des clients Verbindung, und die Menge des Inhalts auf Ihrer Seite. Dies könnte zu ungewollten Sprüngen und zittern, wenn Sie gerade ausführen jedes styling.

InformationsquelleAutor Andreas Eriksson
1

img nicht geladen werden auf DOM-ready. docs:

Während JavaScript bietet das load-Ereignis für das ausführen von code, wenn eine Seite gerendert wird, wird dieses Ereignis nicht ausgelöst werden, bis alle Elemente, wie Bilder wurden vollständig erhalten. In den meisten Fällen, wird das Skript ausgeführt werden kann, sobald der DOM-Hierarchie bereits vollständig angelegt. Die handler übergeben .ready() garantiert ausgeführt, wenn der DOM fertig ist, so ist dies in der Regel der beste Ort, um fügen Sie alle anderen event-Handler und andere jQuery-code. Bei der Verwendung von Skripts, die sich auf den Wert des CSS-style-Eigenschaften, ist es wichtig, Verweis auf externen stylesheets oder embed style-Elemente, die vor verweisen auf die Skripte.

änderung:
```
$(window).load(function(){
            var diff = $('div.canvas img.photo').get(1).width;
            console.log(diff.width);
        });
```
InformationsquelleAutor gdoron
1

Bild Breite würde nur zur Verfügung, wenn seine vollständig geladen wurde.
jQuery unterstützt onload-Ereignis auf alle Bilder zu.

Können Sie verwenden,
```
$('div.canvas img.photo').load(function(){
  //here the image (or all images which match selector) has been loaded.
}
```
- Gibt es "Vorbehalte" beim anbringen der Last der Bilder. docs
- Vielen Dank für die info und den link. Es hat wirklich geholfen. Ich habe immer load in img-tags in der Vergangenheit. Ich werde es nicht wieder zu tun.
- Recht, einfach befestigen Sie es auf das Dokument, wie in meiner Antwort.
InformationsquelleAutor Jashwant
0

Das problem ist, dass dein Bild noch nicht geladen ist, wenn Sie versuchen, um seine Abmessungen. Zu machen, arbeiten, wickeln Sie Ihren code in $(window).load. Oder eine andere option. Wenn Sie wissen, die Größe des Bildes können Sie width und height Attribute, dann ist es zur Arbeit zu gehen, sogar in DOMContentLoaded. Manchmal ist es besser, weil onload-Ereignis länger dauert, bis das Feuer dann 'DOMContentLoaded'.
Sonst müssten Sie $(window).load siehe @Andreas Carlbom Antwort.

InformationsquelleAutor dfsq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.