WebSite X5Help Center

 
Ukraine.report .
Ukraine.report .
User

Lazy loading neu  de

Auteur : Ukraine.report .
Visité 571, Followers 1, Partagé 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

Posté le
8 RéPONSES - 3 UTILE - 1 CORRECT
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Wenn du viele Youtube Videos einbindest, gibt es doch das Widget  Youtube-Galerie!

WebSite X5 Marketplace

Vielleicht ist dies etwas für dich!

Lire plus
Posté le de Andreas S.
Ukraine.report .
Ukraine.report .
User
Auteur

das macht leider kein lazy loading und auch fun kann ich dort nicht start und endpunkt setzen lg Andre

Lire plus
Posté le de Ukraine.report .
Franz-Josef H.
Franz-Josef H.
Moderator

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>

Lire plus
Posté le de Franz-Josef H.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

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

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

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

Lire plus
Posté le de Ukraine.report .
Ukraine.report .
Ukraine.report .
User
Auteur

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

Lire plus
Posté le de Ukraine.report .
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

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.

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

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.

Lire plus
Posté le de Ukraine.report .