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

HTML - CSS - JS. Pre-load page. Wczytanie zawartości strony przed wykonaniem funkcji js.

+2 głosów
131 wizyt
pytanie zadane 25 stycznia w JavaScript przez rszczepanski02 Użytkownik (690 p.)

Dzień dobry.

Piszę do Was z prośbą o pomoc. Mianowicie chcę stworzyć stronę internetową, która zapyta nowych użytkowników o język, którym się posługują i w zależności od wyboru przekieruje ich na odpowiednią podstronę. Każde przejście na nową stronę, lub przeładowanie strony poprzedzone jest animacją. Problem polega na tym, że content strony wczytuje się przed odpowiednią funkcją js, która wywołuje animację, oraz ustawia czas jej trwania. Odświeżenie strony wygląda tak, że wczytuje się animacja pulsującego logo i jednocześnie zdjęcie header'a, którego nie powinno tam być, po upływie niecałej sekundy znika, jednak jest to mało profesjonalne i słabo wygląda. Problem również jest w przypadku, w którym strona wykryje, że użytkownik, który próbuję przejść do podstrony w danym języku np. domena.pl/pl/home.html językiem, a nie wybrał go wcześniej to zadanie funkcji location.href = "../index.html"wykonuje się po wczytaniu części strony, pomimo, że jest ona wywoływana na samym początku.

Ciężko jest mi to szczegółowo opisać, dlatego też udostępnię link do strony, na której widoczne są poszczególne problemy w trakcie przejść pomiędzy stronami oraz przy przeładowaniu strony. Z problemem zmagam się już, któryś dzień i nie potrafię go samodzielnie rozwiązać. Liczę na Waszą pomoc!

Link do strony: https://www.rszczepanski.pl/np

Kod: 

 

INDEX (strona dla nowych użytkowników):

<!DOCTYPE html>

<head lang="pl">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script>
        window.onload = function() {
            welcomePage();
        }
    </script>
    <!-- ABOUT WEBSITE -->
    <title>Strona główna</title>
    <meta name="description" content="This is description about this page.">
    <meta name="keywords" content="Website, template, bootstrap">
    <meta name="author" content="Radosław Szczepański">

    <!-- CSS FILES -->
    <link href="assets/css/welcome.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/animations.css" rel="stylesheet" type="text/css" />
    <!-- JS FILES -->
    <script src="assets/js/welcome.js"></script>
    <!-- BOOTSTRAP -->
    <link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;0,700;1,300&display=swap" rel="stylesheet">

</head>

<body>
    <div class="loading-screen">
        <div class="container">
            <div id="img-screen">
                <img src="assets/imgs/logo.jpg" alt="logo" id="img-padding">
            </div>

            <div id="lang-screen" class="text-center text-white">
                <p class="scale-up-center">WYBIERZ JĘZYK</p>
                <div class="line ml-auto mr-auto my-4"></div>
                <p class="scale-up-center mb-5">CHOOSE YOUR LANGUAGE</p>
                <button onclick="plLang();" class="button btn-corners">PL</button>
                <span class="mx-4"></span>
                <button onclick="enLang();" class="button btn-corners">EN</button>
            </div>
        </div>
    </div>
</body>

<!-- Bootstrap JS & JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="assets/bootstrap/bootstrap.min.js" type="text/javascript"></script>

</html>

 

 

HOME (strona dla osób, które wybrały język Polski, skrypt zapamiętuje wybór i za każdym razem automatycznie przenosi do tej pod strony):

<!DOCTYPE html>

<head lang="pl">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script>
        window.onload = function() {
            loadPage();
        }
    </script>
    <!-- ABOUT WEBSITE -->
    <title>Strona główna</title>
    <meta name="description" content="This is description about this page.">
    <meta name="keywords" content="Website, template, bootstrap">
    <meta name="author" content="Radosław Szczepański">

    <!-- CSS FILES -->
    <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/animations.css" rel="stylesheet" type="text/css" />
    <!-- JS FILES -->
    <script src="../assets/js/loadPage.js"></script>
    <!-- BOOTSTRAP -->
    <link href="../assets/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;0,700;1,300&display=swap" rel="stylesheet">

</head>

<body>
    <div id="loadingScreen">
        <div class="wrapper">
            <div class="container fade-in">
                <img src="../assets/imgs/logo.jpg" class="heartbeat" alt="">
            </div>
        </div>
    </div>
    </div>

    <div id="web-content">
        <header id="main">
            <div class="bg-content"></div>
            <div class="container" style="padding-top: 25vh;">
                <div class="row justify-content-center">
                    <div class="header-left col-md-4 my-auto">
                        <h1>Radosław Szczepański</h1>
                        <p>RS Web Developer</p>
                        <p2>Nowoczesny system kanału sprzedaży i promocji w internecie!</p2>
                        <div class="mt-4"><button class="button btn-corners">Sprawdź teraz!</button></div>
                    </div>
                    <div class="header-right col-md-8">
                        <img src="../assets/imgs/header-img.png" width="100%">

                    </div>
                </div>
            </div>
        </header>

    </div>
</body>

<!-- Bootstrap JS & JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="../assets/bootstrap/bootstrap.min.js" type="text/javascript"></script>

</html>

 

JAVASCRIPT (dla index.html):

function welcomePage() {
    if (localStorage.getItem('userSession') == undefined) {
        localStorage.setItem('userSession', 0);
        loadWelcomePage();
    } else if (localStorage.getItem('userSession') == 0) {
        loadWelcomePage();
    } else if (localStorage.getItem('userSession') == 1) {
        location.href = "pl/home.html";
    } else if (locationStorage.getItem('userSession') == 2) {
        location.href = "en/home.html";
    }
}

function loadWelcomePage() {
    var logo = document.getElementById('img-screen');
    var lang = document.getElementById('lang-screen');
    logo.classList.add("fade-in");
    setTimeout(function() {
        logo.className = "fade-out";
        loadWelcomeText();
    }, 3000);

    function loadWelcomeText() {
        lang.classList.add("focus-in-contract");
        setTimeout(function() {
            document.getElementById('img-padding').style.padding = '0';
            lang.style.display = "inline";
        }, 1000);
    }
}

function plLang() {
    localStorage.setItem('userSession', 1);
    location.href = "pl/home.html";
}

function enLang() {
    localStorage.setItem('userSession', 2);
    location.href = "en/home.html";
}

 

JS (dla home.html):
 

function loadPage() {
    var page = window.location.href;
    if (localStorage.getItem('userSession') == undefined) {
        localStorage.setItem('userSession', 0);
        location.href = "https://rszczepanski.pl/np/index.html";
    } else if (localStorage.getItem('userSession') == 0) {
        location.href = "../index.html";
    } else if (localStorage.getItem('userSession') == 1) {
        if (page != "https://rszczepanski.pl/np/pl/home.html") {
            location.href = "https://rszczepanski.pl/np/pl/home.html";
        } else if (page == "https://rszczepanski.pl/np/pl/home.html") {
            loadingScreen();
        }
    } else if (location.Storage.getItem('userSession') == 2) {
        if (page != "en/home.html") {
            location.href = "../en/home.html";
        } else if (page == "/en/home.html") {
            loadingScreen();
        }
    }
}

function loadingScreen() {
    var welcomeScreen = document.getElementById('loadingScreen');
    var webContent = document.getElementById('web-content');
    webContent.style.display = "none";
    welcomeScreen.style.display = "block";
    setTimeout(function() {
        welcomeScreen.classList.add("fade-out");
        webContent.classList.add("fade-in");
    }, 2000);
    setTimeout(function() {
        webContent.style.display = "block";
        welcomeScreen.style.display = "none";
    }, 3000);
}

 


CSS (dla index.html)

* {
    scroll-behavior: smooth !important;
    font-family: 'Roboto', sans-serif;
}

::-webkit-scrollbar {
    display: none !important;
}

.loading-screen {
    text-align: center;
    height: 100vh;
    background-color: #000033 !important;
    overflow: hidden;
}

#img-padding {
    padding-top: 25vh;
}

#lang-screen {
    display: none;
}

#lang-screen p {
    font-size: 36px;
    font-weight: 300;
    opacity: 0.8;
}

.line {
    width: 120px;
    height: 3px;
    background-color: rgb(185, 65, 255);
    opacity: 0.6;
}

.button {
    position: relative;
    padding: 0.8em 1.2em;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    text-shadow: 0px 0px 6px rgba(153, 0, 232, 0.4);
}

.button.btn-corners {
    color: #c490ff;
}

.button.btn-corners.btn-corners::after,
.button.btn-corners.btn-corners::before {
    content: "";
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    border: 2px solid;
    transition: all 0.6s ease;
    border-radius: 2px;
}

.button.btn-corners.btn-corners::after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #ab61ff;
    border-right-color: #ab61ff;
}

.button.btn-corners.btn-corners::before {
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: #ab61ff;
    border-left-color: #ab61ff;
}

.button.btn-corners.btn-corners:hover:after,
.button.btn-corners.btn-corners:hover:before {
    width: 100%;
    height: 100%;
}

#loading-bg img {
    width: 30%;
    height: 30%
}

#loading-bg {
    width: 100% !important;
    height: 100%;
    z-index: 99;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(19deg, rgba(3, 0, 59, 1) 0%, rgba(0, 0, 50, 1) 22%, rgba(57, 0, 119, 1) 100%);
}

 

CSS (dla home.html):
 

::-webkit-scrollbar {
    display: none !important;
}

.wrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#loadingScreen {
    height: 100vh;
    background-color: #000033 !important;
    overflow: hidden;
    width: 100%;
}

#loadingScreen .container {
    padding-top: 33vh;
}

#loadingScreen img {
    width: 25vh;
}

* {
    scroll-behavior: smooth !important;
    font-family: 'Roboto', sans-serif;
}

::-webkit-scrollbar {
    display: none !important;
}

#main {
    background: linear-gradient(19deg, rgba(3, 0, 59, 1) 0%, rgba(0, 0, 50, 1) 22%, rgba(57, 0, 119, 1) 100%);
    height: 100vh;
    overflow: hidden;
}

.header-left h1 {
    font-size: 58px;
    color: white;
    font-weight: 300;
}

.header-left p {
    color: #c490ff;
    opacity: 0.6;
    font-weight: 700;
}

.header-left p2 {
    font-size: 24px;
    color: white;
    font-weight: 300;
}

.bg-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 85vh;
    border-bottom-left-radius: 250px;
    width: calc(90vh - 140px);
    background-image: url(../imgs/onbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


/* btn header */

.button {
    position: relative;
    padding: 0.8em 1.2em;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    text-shadow: 0px 0px 6px rgba(153, 0, 232, 0.4);
}

.button.btn-corners {
    color: #c490ff;
}

.button.btn-corners.btn-corners::after,
.button.btn-corners.btn-corners::before {
    content: "";
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    border: 2px solid;
    transition: all 0.6s ease;
    border-radius: 2px;
}

.button.btn-corners.btn-corners::after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #ab61ff;
    border-right-color: #ab61ff;
}

.button.btn-corners.btn-corners::before {
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: #ab61ff;
    border-left-color: #ab61ff;
}

.button.btn-corners.btn-corners:hover:after,
.button.btn-corners.btn-corners:hover:before {
    width: 100%;
    height: 100%;
}

#loading-bg img {
    width: 30%;
    height: 30%
}

#loading-bg {
    width: 100% !important;
    height: 100%;
    z-index: 99;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(19deg, rgba(3, 0, 59, 1) 0%, rgba(0, 0, 50, 1) 22%, rgba(57, 0, 119, 1) 100%);
}

 

komentarz 25 stycznia przez rszczepanski02 Użytkownik (690 p.)
Wiem, że trochę tego dużo. Z góry dziękuje za poświęcony czas!
1
komentarz 25 stycznia przez X3h Dyskutant (9,540 p.)

@rszczepanski02, odpal stronę, kliknij f12, zobacz stack erroru, at loadPage (loadPage.js:14), Cannot read property 'getItem' of undefined, nie ma czegoś takiego jak location.Storage, tu chyba chodziło o localStorage, zalecam console.logi i inne debugowanie jak kto woli

1
komentarz 25 stycznia przez Author[] Bywalec (2,800 p.)

@rszczepanski02,

Włóż wszystkie elementy których nie pokazujesz w div-a a następnie (koniecznie w html-u - ze względu na kolejność ładowania) daj divowi display: none; 

Dodanie tej właściwości do htmla a nie css-a sprawi że przeglądarka od razu ukryje stworzony element

Następnie dodaj event czekający na zdarzenie "DOMContentLoad", który wywołuje funkcje która chowa animację i pokazuje ukrytego diva

 

Rozwiązanie testowane na Chromie

komentarz 25 stycznia przez ScriptyChris Mędrzec (168,700 p.)

Włóż wszystkie elementy których nie pokazujesz w div-a a następnie (koniecznie w html-u - ze względu na kolejność ładowania) daj divowi display: none; 

Dodanie tej właściwości do htmla a nie css-a sprawi że przeglądarka od razu ukryje stworzony element

Czy twierdzisz, że użycie stylu inline w HTML'u jest szybciej/wcześniej renderowane niż użycie do tego CSS'a? Jeśli tak, to czy możesz podać źródło tej informacji?

1
komentarz 26 stycznia przez Author[] Bywalec (2,800 p.)

Przeglądarka najpierw pobiera cały kod HTML a następnie go analizuje i pobiera inne pliki. Nowoczesne przeglądarki w trakcie pobierania zasobów tworzą DOM strony i pokazują jej elementy. Powoduje to że element jest pokazywany przed tym jak załadowany zostanie plik css. 

Źródło: Link

komentarz 26 stycznia przez ScriptyChris Mędrzec (168,700 p.)

W linku który podałeś nie ma wzmianki o stylach inline'owych (wstawianych bezpośrednio w atrybut style na poszczególnych elementach HTML) a jest podane, żeby nie podłączać skryptów przed arkuszami stylów, bo domyślnie elementy <script> blokują parser DOM na czas pobrania i wykonania skryptu, co faktycznie negatywnie wpływa czas parsowania strony.

Natomiast ja pytałem o wydajność renderowania stylów inline w porównaniu do tych nadanych z CSS'a - skoro napisałeś, że:

Dodanie tej właściwości do htmla a nie css-a sprawi że przeglądarka od razu ukryje stworzony element

Byłem więc ciekaw skąd taki wniosek. Z tego co wiem, to ładowanie CSS'a nie blokuje parsera DOM, chyba że bezpośrednio pod nim znajduje się skrypt (1, 2). Pewnie inaczej przebiega proces renderowania strony, ale nie wnikałem za bardzo w ten temat, dlatego zapytałem skąd masz informacje, że stylowanie inline jest szybsze niż poprzez CSS.

Natomiast, jeśli te różnice w wydajności są niewielkie lub niejednolite pomiędzy przeglądarkami, to z punktu widzenia developmentu i utrzymania takiego kodu, wady stylowania inline w porównaniu do stylowania CSS'em są dosyć znaczące:

  • brak reużywalności styli i upierdliwy refactoring (np. zmień jeden styl dla X elementów HTML zamiast w jednym miejscu w CSS),
  • zwiększona specyficzność takich styli,
  • zmniejszona czytelność kodu HTML i jego większy rozmiar,

Rozumiem, że przykład z display: none podałeś dla jednego elementu, ale jeśli zechcieć ten sposób wyskalować bez wcześniejszych pomiarów - czy i o ile faktycznie to rozwiązanie jest szybsze - to warto znać jego wady.

1
komentarz 27 stycznia przez Author[] Bywalec (2,800 p.)

Lepsze wytłumaczenie jest tutaj: Link

"CSS files load in parallel. Multiple script files may be fetched in parallel, but further parsing will not proceed until a script file has been fetched and executed (unless it has an async or defer attribute). As a performance optimization, browsers may "look-ahead" at other resources in the page and may fetch them in parallel. For example, multiple script files may be fetched in parallel, even though their execution must be serially."

Znaczy to że plik css nie blokuje ładowania czyli ładuje się asynchronicznie czyli może się tak zdarzyć i często się zdarza że dom strony powstanie i zostanie wyświetlone zanim cały plik css zostanie załadowany. Dzieje się tak zwłaszcza przy dużych plikach css.

Gdyby css ładował się synchronicznie to nie byłoby tego problemu ale strona ładowałaby się wolniej

W praktyce można zobaczyć tylko lekkie mignięcie, albo niezaładowanie czcionki przez chwilę. Sprawdzić to można na google lighthouse.  

1 odpowiedź

0 głosów
odpowiedź 27 stycznia przez rszczepanski02 Użytkownik (690 p.)
Dziękuje wszystkim za poświęcony czas. Ostatecznie sam rozwiązałem problem zmieniając trochę działanie skryptu i poprawiając właściwości css, gdyż w nich leżał problem. Efekt nie jest idealny, jednak przeglądając zagraniczne fora, aby w pełni uzyskać to czego chciałem to musiałbym zastosować rozwiązania back-endowe.

Pozdrawiam,

Radosław Szczepański

Podobne pytania

0 głosów
1 odpowiedź 287 wizyt
pytanie zadane 14 lutego 2018 w JavaScript przez Mateusz Wandzel Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 77 wizyt
pytanie zadane 25 marca w HTML i CSS przez Billy Początkujący (490 p.)
0 głosów
0 odpowiedzi 88 wizyt
pytanie zadane 30 lipca 2020 w Java przez Szyszka Gaduła (3,040 p.)

85,875 zapytań

134,650 odpowiedzi

298,919 komentarzy

56,743 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 989p. - adrian17
  4. 984p. - Mikbac
  5. 982p. - Mateusz Bogdan
  6. 912p. - nidomika
  7. 867p. - Michal Drewniak
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 704p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...