• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite einblenden, wenn geladen

T

Tobi44

Mitglied
Hallo,

aus bestimmtem Grund möchte ich den kompletten Inhalt (inkl. Hintergrundbild im body) einer Seite erst dann einblenden, wenn alle Inhalte vollständig geladen wurden. Das kriege ich bisher nicht hin. Habe ein wenig herumgespielt und verschiedene Codeschnipsel versucht anzupassen, hat aber nicht geklappt.

Ich habe mir das so vorgestellt, dass ich ein <body onload="seiteladen()"> mache und dann bei dieser Funktion irgendwas reinschreibe, was die Seite dann anzeigt. Vielleicht gebe ich im css meinem body ein display:none und mache in der funktion ein display:display daraus? Nur wie?

Habe mir das mit jquery oder sowas wesentlich einfacher vorgestellt.
 
fade in nutze ich auf der gleichen Seite für andere Elemente, wie ich damit richtig umgehe weiß ich nicht. Dabei nutze ich z.B. $('#main').delay(100).fadeIn();
Habe es nicht geschafft, das so umzuwandeln, dass es in dieser Funktion klappt. :-(
 
Hallo,

damit bekomme ich eine weiße Seite. mit body ohne # oder . davor habe ich es auch schon versucht, allerdings scheint das in JS wohl nicht zu gehen. Ich muss also wohl meinen body-Tag um id="body" erweitern, und in Deinem Code ein # oder . vor body setzen. ?!

Das scheint eine größere Aktion zu werden ...
 
Hallo,

genau so wie ich das geschrieben haben. Natürlich muss jquery eingebunden sein :O)

Hier ist genau das oben in Aktion: x_body_fadein - jsFiddle

einfach mal auf "RUN" klicken, dann startet das noch mal, ist wie seite neu laden.

Cheffchen
 
Wenn es allerdings darum geht, den body erst dann einzublenden, wenn wirklich alles geladen ist, würde ich statt

Code: 
$(document).ready(function () {
    //fade in
});

doch lieber

Code: 
$(window).load(function () {
    //fade in
});
verwenden.

Ersteres wartet nur darauf, dass der DOM bereit ist. Letzteres auch darauf, dass sämtliche Grafiken geladen sind. Je nach Anwendungsfall kann da ein wichtiger Unterschied bestehen.
 
Super, danke. Das wäre jetzt meine nächste Frage gewesen.

Ich habe es bereits angepasst mit der Wirkung, dass mein "Laden"-Hinweis nun nicht nach einer von mir fest definierten Zeit von 5 Sekunden (was bei Usern mit langsamer Internetverbindung sicherlich zu gering ausfällt und bei jenen mit extremer Geschwindigkeit viel zu lange ist) verschwindet, sondern erst dann, wenn die Seite tatsächlich geladen ist.

Soweit ich sehe, klappt das auch ganz gut. Hoffe die Umsetzung ist so auch korrekt:

Code: 
$(window).load(function () {
$('#loading').fadeOut('fast');
 });
$().ready(function() {
 $('body').fadeIn(3000);
 });
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben