Preload screen

Question

Witam. Sytuacja wyglada tak. W tle strony mam slider, jest tam lacznie okolo 30 zdjec. (Spokojnie to tylko na pc, na responzywnej slider sie nie zalacza). Ponadto w tle bedzie film. Czyli strona okolo 10MB i jedyne co moge z tym zrobic to preload screen. I teraz pytanie. Czy jest jakis event/sposob dzieki ktoremu bede mogl wczytac zdjecia i film i wtedy poczekac na event? Cos jak $(document).onload ale dla wszystkich plikow. Czy lapac te 30 zdjec i wtedy jak juz beda w zmiennych wywolac zakonczenie animacji?

Comments

Czy jest jakis event/sposob dzieki ktoremu bede mogl wczytac zdjecia i film i wtedy poczekac na event?

Czy te multimedia wczytują się XHRkami, czy są już zakodowane w HTML?

---

HTML

---

Czy ich źródłem jest ta sama domena, czy pochodzą z różnych domen?

---

Na tym samym serwerze

Answer 1

Możesz na start aplikacji pokazać swoje okno ładowania. Podpinasz się w międzyczasie listenerami 'load' na wszystkie multimedia (możesz do tego celu każdemu HTMLowi nadawać customowy atrybut data-lazy-loaded). Tworzysz tablicę promisów i gdy wszystkie multimedia się załadują (czyli ich promisy się "zresolwują" a.k.a "spełnią") to ukrywasz loader (jeśli dobrze zrozumiałem, co chcesz zrobić).

const lazyLoadedElements = [...document.querySelectorAll('[data-lazy-loaded]')];
const promises = lazyLoadedElements.map( (element) => {
    return new Promise( (resolve) => {
        element.addEventListener( 'load', () => { resolve(element); })
    } );
) );

Promise.all( promises )
             .then( (response) => { 
                 /** ukrywasz ekran ładowania */ 
             }, (reason) => { 
                 /** nie pobrało się, wyświetlasz jakiś komunikat, albo inaczej to obsługujesz */
             } );

 

Comments

Generalnie chodzi o to ze:

Mam 5 sekcji. Kazda sekcja ma w background-image 4 zdjecia, ktore sie zmieniaja, i chce te 4 zdjecia wczytac zanim otworzy sie strona, coby nie dawac uzytkownikowi na wpol bialej strony

---

Przecież chciałeś użyć ekranu ładowania, wtedy użytkownik nie zobaczyłby pustej strony.

---

No tak. Ale chodzi o to ze mam wiecej zdjec niz to ktore jest w chwili ladowania w tle. Wiec czy te promisy zadzialaja na to?

---

W promisy owijasz te multimedia, które po zakończeniu ładowania wyłączą ekran ładowania. Chodzi o to, aby - tak jak napisałeś w pytaniu - odpalić trigger, gdy wszystkie wybrane multimedia się załadują (czyli te w slajderze/slajderach). Promisy ułatwiają w tym przypadku sprawdzenie, czy wszystkie multimedia już się załadowały.

Chyba, że źle Ciebie zrozumiałem:

Czy jest jakis event/sposob dzieki ktoremu bede mogl wczytac zdjecia i film i wtedy poczekac na event?

Co oznacza "event/sposób, dzięki któremu można wczytać zdjęcia/filmy i poczekać na event"? Event load odpala się, gdy dany zasób został wczytany (czy to strona, czy obrazek).

---

Chodzi mi o to ze jezeli w jQuery dam:

$(document).onload() to on poczeka az sie zaladuje strona i te moje 5 obrazkow z ktorymi sekcje zaczynaja, ale nie te ktore sa zamieniane w sliderze w pliku js. Chyba ze sie myle.

I o wlasnie taki event mi chodzilo

---

To dodaj sobie te obrazki w sliderach przez JavaScript - wtedy, gdy strona z początkowymi sekcjami już będzie załadowana. Czyli w $(document).onload() utwórz obrazki (nadając im atrybut src) i dodaj je po prostu do strony (jQuery.append() lub podobna metoda).

---

Czyli jezeli w pliku js dodam sciezki do tych obrazkow to document.onload poczeka na nie?

---

Bezpieczniej jest użyć $(window).on('load', function() {} )

---

ok dzieki!