lazyload mit noscript

[mixmastertobsi]

Hallo Zusammen,

mal eine Frage zu LazyLoad. Gibt es ggf. ein jquery Script, welches den Inhalt im noscript-Tag nachladet. Ich hatte es mir wie folgt vorgestellt.

<noscript id='lazy'><img src='image.jpg'/></noscript>

var c = $("#lazy").text(); $("#lazy").append(c);

[dedlfix]

Tach!

Gibt es ggf. ein jquery Script, welches den Inhalt im noscript-Tag nachladet. Ich hatte es mir wie folgt vorgestellt.

<noscript id='lazy'><img src='image.jpg'/></noscript>

var c = $("#lazy").text(); $("#lazy").append(c);

Es bringt nur nichts, wenn du c an #lazy anhängst, denn das wird ja nicht angezeigt, wenn Javascript laufen kann. Vielleicht willst du ja appendTo() statt append() verwenden und ein anderes Zielelement angeben. Und obendrein sicherlich html() statt text().

Andererseits ist noscript kein Container für Templates. Nimm doch script mit id und einem type ungleich text/javascript.

dedlfix.

[mixmastertobsi]

Hallo,

soll natülich appendTo sein. Ob text() oder html() ist eigentlich egal.

Das habe ich nicht verstanden

Nimm doch script mit id und einem type ungleich text/javascript.

[Orlok]

Hallo

Das habe ich nicht verstanden

Nimm doch script mit id und einem type ungleich text/javascript.

Wenn du dem type-Attribut des script-Elementes einen Wert gibst, mit dem der Browser nichts anfangen kann, dann wird er nicht versuchen den Inhalt zu interpretieren, aber du kannst trotzdem auf das Element zugreifen.

Gruß,

Orlok

[mixmastertobsi]

Sorry - mach mal bitte ein Beispiel

Hallo

Das habe ich nicht verstanden

Nimm doch script mit id und einem type ungleich text/javascript.

Wenn du dem type-Attribut des script-Elementes einen Wert gibst, mit dem der Browser nichts anfangen kann, dann wird er nicht versuchen den Inhalt zu interpretieren, aber du kannst trotzdem auf das Element zugreifen.

Gruß,

Orlok

[Gunnar Bittersmann]

@@mixmastertobsi

Sorry - mach mal bitte ein Beispiel

Du findest eins in der HTML-Spec.

Leider vergessen die Spec-Autoren, IDs für Abschnitte zu vergeben, so dass man nicht drauf verlinken kann. Suche auf der Seite nach <script type="text/x-game-map">.

LLAP 🖖

[woodfighter]

Tach,

Du findest eins in der HTML-Spec.

Leider vergessen die Spec-Autoren, IDs für Abschnitte zu vergeben, so dass man nicht drauf verlinken kann. Suche auf der Seite nach <script type="text/x-game-map">.

du meinst http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-script-element:the-script-element-58?

mfg
Woodfighter

[Gunnar Bittersmann]

@@woodfighter

Tach,

Du findest eins in der HTML-Spec.

Leider vergessen die Spec-Autoren, IDs für Abschnitte zu vergeben, so dass man nicht drauf verlinken kann. Suche auf der Seite nach <script type="text/x-game-map">.

du meinst http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-script-element:the-script-element-58?

Genau. ;-)

Ich hatte von dem p aus nach oben geschaut. Wäre nicht auf die Idee gekommen, dass da weiter unten …

Die ID scheint aber auch eher zufällig da zu sein als gewollt. („Gewollt“ im Sinne von „für die Referenzierung dieses Codebeispiels gewollt“.)

LLAP 🖖

[woodfighter]

Tach,

Ich hatte von dem p aus nach oben geschaut. Wäre nicht auf die Idee gekommen, dass da weiter unten …

jede verlinkte Nennung eines HTML-Code-Elements bekommt eine ID.

Die ID scheint aber auch eher zufällig da zu sein als gewollt. („Gewollt“ im Sinne von „für die Referenzierung dieses Codebeispiels gewollt“.)

Im Moment ist sie zumindest in der Nähe, aber ich gehe davon aus, dass das nicht stabil ist und das wird auch der Grund sein, warum die Unterabschnitte keine IDs haben.

mfg
Woodfighter

[dedlfix]

Tach!

Sorry - mach mal bitte ein Beispiel

Nimm doch script mit id und einem type ungleich text/javascript.

<script type="text/mein-template" id="lazy">
  <zeug></zeug>
</script>

Ist das wirklich so schwer verständlich?

dedlfix.

[mixmastertobsi]

Jetzt habe ich es verstanden, aber damit ist mir nicht geholfen.

Aktuell ist es so und ich lasse noscript mit css ausblenden. Die Idee ist, auf den ersten Image-Tag zu verzichten und eben die Daten aus dem noscript Attribut zu "ziehen".

<img src='1px.gif' data-src='image.jpg'/><noscript id='lazy'><img src='image.jpg'/></noscript>

[Gunnar Bittersmann]

@@mixmastertobsi

Jetzt habe ich es verstanden, aber damit ist mir nicht geholfen.

HTML-Elemente nicht zu missbrauchen dürfte eine Hilfe sein. Nicht nur für dich, sondern auch für die Nutzer deiner Seiten.

Die Idee ist, auf den ersten Image-Tag zu verzichten und eben die Daten aus dem noscript Attribut zu "ziehen".

Warum??

<img src='1px.gif' data-src='image.jpg'/>

Warum ziehst du nicht die Information aus dem data-src-Attribut?

Im Übrigen fehlt das alt-Attribut.

LLAP 🖖

[1unitedpower]

Nimm doch script mit id und einem type ungleich text/javascript.

Wenn du dem type-Attribut des script-Elementes einen Wert gibst, mit dem der Browser nichts anfangen kann, dann wird er nicht versuchen den Inhalt zu interpretieren, aber du kannst trotzdem auf das Element zugreifen.

Allerdings kann man auf diese Weise nicht auf Nachfahren-Elemente zugreifen, da der Browser auch nicht versuchen wird den Inhalt des <script>-Elements zu parsen. Da der Inhalt hier aber HTML ist, erscheint mir das ersünscht zu sein. Mit dem <template>-Element anstelle des <script>-Elements erreicht man, dass der HTML-Inhalt geparst wird, aber vorerst noch in einem inaktiven Zustand verweilt, Inhalte werden nicht gerendert, Bilder nicht geladen etc.. Erst wenn Teile dieses DOM-Fragments in die Außenwelt verschoben oder kopiert werden, wird das DOM aktiv.

[Orlok]

Hallo

Allerdings kann man auf diese Weise nicht auf Nachfahren-Elemente zugreifen, da der Browser auch nicht versuchen wird den Inhalt des <script>-Elements zu parsen. Da der Inhalt hier aber HTML ist, erscheint mir das erwünscht zu sein. Mit dem <template>-Element anstelle des <script>-Elements erreicht man, dass der HTML-Inhalt geparst wird, aber vorerst noch in einem inaktiven Zustand verweilt, Inhalte werden nicht gerendert, Bilder nicht geladen etc.. Erst wenn Teile dieses DOM-Fragments in die Außenwelt verschoben oder kopiert werden, wird das DOM aktiv.

Tja, das kommt davon, wenn man – wie ich hier – statt den ganzen Thread zu lesen nur den letzten Beitrag liest und dann meint, seinen Senf dazu geben zu müssen. ;-)

Dein erster Halbsatz erweckt hier aber einen falschen Eindruck, denn es ist zwar richtig, dass beim Laden des Dokuments der Inhalt des script-Elementes nicht geparst wird, aber das heißt nicht, dass man auf darin enthaltene HTML-Inhalte grundsätzlich nicht zugreifen kann:

HTML

<script id="source" type="text/my-template">
  <p>Hello World</p>
</script>

JavaScript

var source = document.getElementById('source').innerHTML;

var target = document.createElement('div');
document.body.appendChild(target);
target.innerHTML = source;

console.log(target.firstElementChild.textContent || null); // 'Hello World'

Unter Verwendung der Methode innerHTML kann man dafür sorgen, dass der Inhalt des script-Elements nachträglich geparst wird und danach auch zur Verfügung steht.

Der Vorteil des template-Elementes liegt hier rein funktional betrachtet nicht darin, dass es sonst nicht möglich wäre auf die hinterlegten Inhalte zuzugreifen, sondern vielmehr darin, dass wie du richtig sagst, der Inhalt bereits beim Laden der Seite geparst wird und somit zur Verfügung steht, wenn er gebraucht wird, was natürlich performanter ist, als wenn dies erst beim Methodenaufruf passiert.

Gruß,

Orlok

[1unitedpower]

Dein erster Halbsatz erweckt hier aber einen falschen Eindruck, denn es ist zwar richtig, dass beim Laden des Dokuments der Inhalt des script-Elementes nicht geparst wird, aber das heißt nicht, dass man auf darin enthaltene HTML-Inhalte grundsätzlich nicht zugreifen kann:

Den Eindruck wollte ich nicht erwecken.

Unter Verwendung der Methode innerHTML kann man dafür sorgen, dass der Inhalt des script-Elements nachträglich geparst wird und danach auch zur Verfügung steht.

Das geht, und wird von Polyfills vermutlich sogar so ähnlich implementiert. Der Punkt ist, dass man sich beim <script>-Element selber um das Parsing kümmern muss, das ist eine unnötige Abhängigkeit.

Der Vorteil des template-Elementes liegt hier rein funktional betrachtet nicht darin, dass es sonst nicht möglich wäre auf die hinterlegten Inhalte zuzugreifen, sondern vielmehr darin, dass wie du richtig sagst, der Inhalt bereits beim Laden der Seite geparst wird und somit zur Verfügung steht, wenn er gebraucht wird, was natürlich performanter ist, als wenn dies erst beim Methodenaufruf passiert.

Es ist vermutlich sogar wirklich etwas performanter, aber das sehe ich nur als marginalen Vorteil des <template>-Elements an. Wesentlich für mich ist, dass das <template>-Element eine uniforme Schnittstelle bietet, um die Inhalte zu adressieren und damit zu arbeiten.

[Matthias Apsel]

Hallo 1unitedpower,

Es ist vermutlich sogar wirklich etwas performanter, aber das sehe ich nur als marginalen Vorteil des <template>-Elements an.

<klugscheiß>Die spitzen Klammern gehören nicht zum Elementnamen.</klugscheiß>

Bis demnächst
Matthias