Menu Zamknij

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

Ostatnia aktualizacja wpisu:

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.


Mogą Cię też zainteresować:

Dodaj komentarz

avatar
  Subscribe  
Powiadom o