• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ładowanie strony - progress bar, ikona ładowania.

VPS Starter Arubacloud
0 głosów
603 wizyt
pytanie zadane 5 sierpnia 2021 w HTML i CSS przez Igorek Mądrala (6,290 p.)
cześć, jakby jak sprawdzic w jakim stopniu strona jest załadowana? tzn że zrobić np. progress bar i żeby on sie przesuwał wraz z ładowaniem strony, a gdy dopiero jakby cała strona sie załaduje to ten progress bar, czy ekran ładowania zniknie i pojawi sie strona

1 odpowiedź

–2 głosów
odpowiedź 5 sierpnia 2021 przez pablop76 VIP (123,240 p.)
edycja 5 sierpnia 2021 przez pablop76

Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.

Sposób wykorzystania zdarzenia load

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preloader</title>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/css/uikit.min.css" />
  
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.1/dist/js/uikit-icons.min.js"></script>
    <style>
                #js-progressbar{
                    width: 300px;
                }
        .preloader {
            position: fixed;
                      justify-content: center;
            z-index: 10000;
            visibility: hidden;
            opacity: 0;
            width: 100vw;
            height: 100vh;
            top: 0;
            background-color: #10131a;
            transition: opacity 400ms ease-in-out, visibility 0s 400ms;
        }
  
        .show-preloader {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
  
<body>
    <div class="preloader uk-flex uk-flex-middle uk-text-center">
                <progress id="js-progressbar" class="uk-progress" value="10" max="100"></progress>
    </div>
    <h1>window.onload = funcRef;</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas unde ab, eligendi expedita tempore quo suscipit
        nam sint, impedit nemo possimus. Eius nihil ratione excepturi culpa laboriosam itaque eligendi tenetur!
        Consectetur, aspernatur repudiandae inventore eveniet quam nisi repellendus dicta, minima hic sit quia nostrum
        soluta at! Repudiandae necessitatibus veniam numquam quasi minus dolores porro suscipit enim aspernatur. Fuga,
        quos labore!</p>
    <script>
              const preloader = document.querySelector('.preloader');
        preloader.classList.add('show-preloader');
            
        UIkit.util.ready(function () {
        var bar = document.getElementById('js-progressbar');
        var animate = setInterval(function () {
            bar.value += 10;
            if (bar.value >= bar.max) {
                clearInterval(animate);
            }
        }, 100);
                    
        window.addEventListener('load', () => {
            setTimeout(() => {
                preloader.classList.remove('show-preloader');
            }, 1000);
            });
           });
    </script>
</body>
  
</html>

Niestety nie wiem czy da się to uzyskać bez setTimeout, ponieważ nie wiem jak rozwiązać dylemat co było pierwsze, kura(załadowanie dom i reszta)  czy jajko (uruchomiony progres bar) 

Podobne pytania

0 głosów
1 odpowiedź 230 wizyt
pytanie zadane 1 września 2019 w HTML i CSS przez Majonez.exe Gaduła (3,490 p.)
0 głosów
1 odpowiedź 236 wizyt
pytanie zadane 12 grudnia 2018 w JavaScript przez Krzysio4224 Obywatel (1,690 p.)
0 głosów
0 odpowiedzi 94 wizyt
pytanie zadane 16 października 2020 w JavaScript przez napoludniestad.pl Użytkownik (960 p.)

92,830 zapytań

141,771 odpowiedzi

320,817 komentarzy

62,159 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...