WebSite X5Help Center

 
Ukraine.report .
Ukraine.report .
User

Lazy loading neu  de

Autor: Ukraine.report .
Besucht 606, Followers 1, Geteilt 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

Gepostet am
8 ANTWORTEN - 3 NüTZLICH - 1 KORREKT
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

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

WebSite X5 Marketplace

Vielleicht ist dies etwas für dich!

Mehr lesen
Gepostet am von Andreas S.
Ukraine.report .
Ukraine.report .
User
Autor

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

Mehr lesen
Gepostet am von 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>

Mehr lesen
Gepostet am von Franz-Josef H.
Daniel W.
Daniel W.
User

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

Mehr lesen
Gepostet am von Daniel W.
Ukraine.report .
Ukraine.report .
User
Autor

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

Mehr lesen
Gepostet am von Ukraine.report .
Ukraine.report .
Ukraine.report .
User
Autor

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

Mehr lesen
Gepostet am von Ukraine.report .
Daniel W.
Daniel W.
User

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.

Mehr lesen
Gepostet am von Daniel W.
Ukraine.report .
Ukraine.report .
User
Autor

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.

Mehr lesen
Gepostet am von Ukraine.report .