JavaScript DOM und Bilder

[Schumiel]

Hallo,

besteht die Möglichkeit, img-tags vor dem Laden aus dem DOM zu entfernen, damit die Bilder nicht geladen werden?

Bitte um Quellen.
Ich finde dazu irgendwie nichts.

 

[blackbirdone]

Kannst mit Observer notifications oder Mutation observers direkt den parser abgreifen.
Ob das den bildladeprocess stoppt, keine Ahmung.

 

[benneq]

Jein. Also eher nein. Aber zukünftig vielleicht unter bestimmten Umständen

Damit du mit JS auf das img Tag zugreifen kannst, muss es ja bereits vom Browser ausgewertet worden sein. Und normalerweise fängt der Browser dabei auch sofort an das Bild herunterzuladen.

Chrome will demnächst ein Feature einführen, womit Bilder erst geladen werden, wenn sie (in die Nähe) des sichtbaren Bereichs kommen. Das kann aber auch bedeuten, dass die Bilder heruntergeladen werden, sobald du mit JS darauf zugreifst, damit z.B. die Größe ausgelesen werden kann.

Wenn der HTML Code unter der Kontrolle ist könntest du aber auch das img Tag modifizieren, und z.B. <img data-src="..." /> benutzen, und dann mittels JS das "src" Attribut für die Bilder setzen, die geladen werden sollen. Aber gut möglich, dass das nicht HTML konform ist.

 

[nazdun]

Ich habe es jetzt nicht ausprobiert, aber theoretisch schon. Du könntest dich an das DOMContentLoaded Event hängen und dann einfach mit dem passenden Selektor und remove() die Bilder entfernen.

Ob das jetzt schnell genug ist, wie @benneque schon schrieb, kann ich grad nicht sagen.

 

[Schumiel]

benneque
Hast du eine Quelle, wo Chrome das kommuniziert hat, dass es bald kommen könnte?

 

[benneq]

@Schumiel https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/jxiJvQc-gVg/wurng4zZBQAJ
Etwas einfacher lesbar: https://addyosmani.com/blog/lazy-loading/

 

[Schumiel]

nazdun
Habe ich grade ausprobiert. Bei mir wird der Inhalt geladen und erst danach wird der Inhalt mit console.log ausgegeben. Das DOM müsste fertig vor dem laden der Seite geladen werden.

 

[FranzvonAssisi]

Sag mal, was du vorhast, bitte.

Das hier klingt stark nach xy-Problem.


Du kannst die img-Tags durch Platzhalter ersetzen und dann durch Javascript laden lassen. Das ist einfacher und (im Moment) zuverlässiger, als das Laden verhindern zu wollen.

Lg

 

[blackbirdone]

nazdun
Habe ich grade ausprobiert. Bei mir wird der Inhalt geladen und erst danach wird der Inhalt mit console.log ausgegeben. Das DOM müsste fertig vor dem laden der Seite geladen werden.

Deshalb schrieb ich ja auch yas du dich direkt an den DOM parser hängen kannst.

 

[Schumiel]

Was ich gesucht habe ist unveil.

 

[mastaqz]

Aber Vorsicht: Latest commit on May 29, 2014, 73 offene Issues.
https://github.com/luis-almeida/unveil

Das Original wird noch maintained: Latest commit on Apr 11
https://github.com/tuupola/lazyload