lazyload mit noscript

[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