Lazy loading neu
Autore: Ukraine.report .
Visite 608,
Followers 1,
Condiviso 0
Hallo ich will gerne dieses Skript verwenden:
<iframesrc="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
https://web.dev/articles/iframe-lazy-loading?hl=de
hat wer Erfahrung damit - und bringt es etwas - wenn ich viele Videos auf der Seite eingebettet habe oder gibt es besseres ?
Lg Andre
Postato il
Wenn du viele Youtube Videos einbindest, gibt es doch das Widget Youtube-Galerie!
WebSite X5 Marketplace
Vielleicht ist dies etwas für dich!
Autore
das macht leider kein lazy loading und auch fun kann ich dort nicht start und endpunkt setzen lg Andre
Warum probierst Du es nicht einfach aus?
Du musst nur beachten, dass zwischen iframe und src ein Leerzeichen gehört. Also
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
Ich würde vorschlagen den einfachen Zusatz loading="lazy" zum Iframe-Code zu verwenden.
Da die Funktion in Chrome, Edge, Firefox und Safari integriert wurde, dürften die allermeisten Webseitenbesucher davon profitieren und die Betreiber von Webseiten haben ihre Aufgabe getan.
-----
Bei standardisiertem Lazy Loading von iFrames wird das Laden von nicht sichtbaren iFrames verzögert, bis der Nutzer in der Nähe scrollt. Dadurch werden Daten eingespart, andere Teile der Seite schneller geladen und die Speichernutzung reduziert.
Quelle: siehe Link im 1. Post
-----
Wer auch bei den Iframes mit YouTube Videos im sichtbaren Bereich Datenvolumen sparen will, der muss die Javascript-Variante auf meiner Webseite verwenden, siehe
>> http://finde-links.de/123test-modeshop/youtube-iframe.html
Autore
1. "Du musst nur beachten, dass zwischen iframe und src ein Leerzeichen gehört. " von FranzJosef - War wichtig.
2. Ich würde vorschlagen den einfachen Zusatz loading="lazy" zum Iframe-Code zu verwenden von DanielW war wichtig für mich - damit habe ich ddie Grundformel verstanden.
3. Der Hinweise auf schnellere Seitenladedauer durch Einbau eines Vorschaubildes bei eingebetteten YT Videos war wichtig - weil ich machte ich es nur weil das Vorschaubild des Videos nicht passte.
Aber stimmt - es werden ja dann erst die Videos geladen, die man einbaut - macht Sinn wenn man sehr viele Videos auf einer Seite eingebettet hat, die erst beim Anklicken geladen werden.
Nochmals für die sehr hilfreichen Tipps.
lg Andre
Autore
Ich habe das Skript nochmals hier anschaulich dargestellt, aber s geht noch nicht :( irgendwo ist ein Fehler :( - weil das Video spielt nicht ab. :(
https://ukrainedaily.net/kurz-geschichte-ukraine.html
Ich habe alle " ersetzt mit ' bis auf die " bei das Inframe begrenzen - die darf ich ja nicht ändern.
Wo füge ich das: loading='lazy' dann ein?
<p
id='Text1'
onclick='changeText1()'
><img
src='bilderYT/01.jpg'
width='100%'
height='210'
></p>
<script>
function changeText1()
{
document.getElementById('Text1').innerHTML =
"<iframe
width='100%'
height='210'
src='https://www.youtube.com/embed/P0Cvgc7Mlqs?
start=12&
end=164&
autoplay=1'
title='YouTube video player'
frameborder='0'
allow='accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture;
web-share' allowfullscreen
></iframe>";
}
</script>
lg Andre
Beim Javascript-Code mit eigenem Vorschaubild, den ich zusammengestellt habe, ist kein ...
loading='lazy'
... erforderlich, da der Iframe-Code ja erst nach dem Klick aufs Vorschaubild geladen wird und vorher ist der Iframe-Code für den Browser sozusagen "nicht vorhanden", d.h. loading='lazy' wäre nutzlos.
Autore
hi ja da hast du recht - ich wollte auch meinen Fehler in der von mir modizizierten Formel wissen - haber habe ihn auch gefunden und
dass die zwei " " die das IFRAME abgrenzen logischer weise lebenswichtig sind für die Formel.
Und wo ich die loading="lazy" funktion einbaue - wenn ich kein Vorschaubild habe, wie Franz Josef meinte.
für die tolle Hilfe :) Problem gelöst.