WebSite X5Help Center

 
Ukraine.report .
Ukraine.report .
User

Lazy loading  de

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

https://www.ukrainereport.eu

Danke Andre :)

Gepostet am
7 ANTWORTEN - 1 NüTZLICH
Daniel W.
Daniel W.
User

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.

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

ja ich hoffe :)

Mehr lesen
Gepostet am von Ukraine.report .
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

(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

.

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

hallo - klingt eine gute Idee - danke aber wie kann ich das hier tun dafür :) lg Andre

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

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.

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

super danke das hilft - du hast auch eine Seite dazu gemacht oder ? finde nur den Helplink :) lg Andre

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

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

Mehr lesen
Gepostet am von Daniel W.