Lazy loading 
Autor: Ukraine.report .
Visited 824,
Followers 1,
Udostępniony 0
Hallo - ich verwende hier auf dieser Seite - "Portfolio" ich habe diverse 4 Kategorien und es werden trotz der Unterteilung in Kategorien alle 500 Bilder (icons 5 k pro billd) geladen - dauert 10 Sekunden - auch wenn ich nur auf die erste Kategorie zeigen eingestellt habe. Hier 2024 04
Gibt es eine Möglichkeit mit Lazy Loading die Seite schneller zu machen.
Danke Andre :)
Posted on the
Da alle Datum-Links auf der Portfolio-Seite für den Wechsel der Kategorien auf href="#" lauten, wird das Blättern offenbar mit Javascript gemacht und alle Bilder auf Vorrat geladen.
Vielleicht habe die Javascript-Experten, sprich KolAsim, Tipps dazu.
Autor
ja ich hoffe :)
(It > De) ... Lazy Loading kann nicht angewendet werden, und dann ist es nicht wahr, dass es die Leistung verbessert...
... Meiner Meinung nach ist es für eine so umfangreiche Seite besser, einen Preloader anzuwenden und ihn an das Portfolio anzupassen, damit die Leute wissen, dass die Seite geladen wird...
.
ciao
.
Autor
hallo - klingt eine gute Idee - danke aber wie kann ich das hier tun dafür :) lg Andre
Hier ein Preloader, der einen drehende Kreis zeigt bis die Webseite geladen ist.
Und hier meine getestete Anleitung:
In WebSite X5 unter ...
3 Sitemap
... die Seite markieren, in die der Preloader eingebaut werden soll, und oben auf "Eigenschaften" klicken, dann den Reiter "Erweitert" anklicken und 3 verschiedene Codes in diese 3 Bereiche einfügen ...
Benutzerdefinierter Code:
1) Vor dem </HEAD>-Tag
<style>
#preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
2) Nach dem <BODY>-Tag
<div id="preloader">
<div id="loader"></div>
</div>
>> Alternative mit zusätzlichem Text bei besonders langer Ladezeit:
<div id="preloader">
<div id="loader"></div>
. . . diese Seite hat eine längere Ladezeit, bitte haben sie etwas Geduld.
</div>
3) Vor dem </BODY>-Tag
<script>
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
document.getElementById("preloader").style.display = "none";
}, 1000);
});
</script>
Quelle der Codes >> https://dev.to/sh20raj/how-to-add-preloader-in-html-page-1koc
Wer will, der kann auch die vielen anderen Codes für Preloader-Grafiken aus dem Internet testen, da jetzt bekannt ist wo die einzelnen Code-Teile von CSS, HTML und Javascript bei WebSite X5 eingefügt werden. Allerdings sind nicht alle Codes so übersichtlich wie der hier getestete Code.
Autor
super danke das hilft - du hast auch eine Seite dazu gemacht oder ? finde nur den Helplink :) lg Andre
Auf meiner Testseite für verschiedene Methoden zur Videoeinbindung habe ich den drehenden Kreis eingerichtet, allerdings ist die Ladezeit nicht sehr hoch und der drehende Kreis nur kurz zu sehen.
>> https://findelinks.de/123shop-hosteurope/contacts.php