Ladescreen zur Website hinzufügen?
Hi!
Also im Internet habe ich viele Css Templates für eine Ladeanmiation gefunden.
ABER was ich nicht finde ist ein script dazu.
Also ich hätte gerne, dass der Browser zuerst die Website voll lädt ( Bilder, etc ), währenddessen die CSS Ladeanimation angezeigt wird und erst wenn alles fertig ist die Webseite dargestellt wird.
Mein Free Host ist nämlich langsam und das schaut nicht gut aus wenn das Hauptbild der Webseite zuerst nur zu Hälfte angezeigt wird und dann langsam reinlädt.
Danke für eure Tipps
2 Antworten
- Mach in deinen Body einen Div, der die komplette Seite überdeckt. (Im CSS: Hoher z-index, Background-Color, Height und Width auf 100%). Am besten mit id, z.B. id="loading". Siehe Beispiel weiter unten.
- In diesem Diff zeigst du die Lade-Animation an.
- Gib dem Body eine Funktion die er ausführen soll, wenn er vollständig geladen ist. In diesem Fall „setup“:
<body onload=setup()>
<div id="loading"> Ladeanimation
...
</body>
4.In diese Funktion schreibst du, dass das loading-div entfernt werden soll:
function setup() { document.getElementById("loading").remove();
}
Fertig. Wenn du das nicht schaffst/verstehst meld dich gerne.
Moin,
wenn du eine CSS Vorlage gefunden hast, dann mußt die Einträge in deine CSS übernehmen. Ein Script wird es dafür wohl nicht geben.(Ist mir nicht bekannt)
Besser ist allerdings mal zu überprüfen, warum deine Webseite langsam lädt. Das muß nicht zwangsläufig mit dem free Hoster was zu tun haben. Oft sind zu große Bilder schuld, die nicht richtig reduziert wurden.
Wenn das nicht hilft, dann auch mal über einen Hosterwechsel nachdenken.
Es gibt auch welche, die die Bandbreite nicht beschneiden und volle Leistung garantieren.
Jedes Ding hat immer 2 Seiten.
Grüsse von katzebiggi und bleib gesund
danke für deine antwort. ok probiere ich mal aus. ich hab einiges zu preload gefunden im netz bei diversen documentations aber nichts führte mich ans ziel.
yep sind die bilder (4-8mb)- aber ist gewollt :)