Ładowanie strony - progress bar, ikona ładowania.

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ź

odpowiedź 5 sierpnia 2021 przez pablop76 VIP (123,580 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)