Ukrywanie zawartości strony przed jej pełnym załadowaniem

Czasami jest potrzeba, żeby nasza strona pojawiła się w przeglądarce użytkownika, dopiero w momencie kiedy załaduje się w całości. Oto jak to zrobić.

Zaraz po otwarciu tagu
<body>
Dodajemy:
 <div id="hide-all"/>
 W pliku/tagach dotyczących naszych stylów CSS dodajemy:
#hide-all { position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
Jeżeli chcemy zmienić kolor "okładki" zmieniamy wartość w background: #000; na np #fff (dla całej białej strony).

Przed tagiem zamykającym:
</body>
Dodajemy kod JavaScript:
$(window).on('load', function() {
$("#hide-all").hide();
});
Pamiętajmy, że taki kod umieszczamy w tagach: <script type="text/javascript"> </script>

Gotowe. Od tego momentu użytkownicy (z aktywną obsługą kodu JS w przeglądarce) zobaczą naszą stronę dopiero jak jej wszystkie elementy zostaną wczytane.

Brak komentarzy

Prześlij komentarz