Pytanie do specjalisty od JavaScript


#1

Mam zrobione okno z tekstami, kilkoma grafikami, które dosyć wolno się ładują, przez co elementy pływają podczas renderowania okna i średnio to wygląda.

Czy jest sposób aby poczekać na grafiki aż zostaną pobrane z cache przeglądarki lub serwera i okno się pokaże dopiero po umieszczeniu grafik w divie.
Czy może canvas lepiej sobie z tym poradzi bo wie że dany element jest już gotowy i załadowany do widoku?


#2

jak z góry ustalisz wysokość i szerokość grafiki to nie będzie pływać, np:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">


#3

Faktycznie zapomniałem o wysokości jednego z największych obrazków, jest zdecydowanie lepiej.

Teraz pozostaje mi tylko zlikwidować mignięcie tak jak w migawce aparatu, może dać jakąś animację ładowania trwającą z 3 sekundy a w tle pobrać obrazki, jak to robicie?


#4

Kombinuje z preloaderem ale nie działa jak oczekuję, bo obrazki jeszcze się ładują a konsola pokazuje komunikat że już dawno załadowane.

window.addEventListener('load', (event) => {
        console.log('załadowano');
    });

Jaki powinien być prawidłowy kod sprawdzający czy wszystkie elementy strony zostały załadowane?


#5

Skrypt jest umieszczony na początku, czy na końcu dokumentu html?
Jeśli na początku, to spróbuj przenieść na koniec, to potrafi czasami spłatać figla :slight_smile:


#6

Spróbuj:

document.body.addEventListener('load',(event) => {
    console.log('załadowano')
});

Dodanie script tagu na końcu body też powinno działać


#8

JS mam zawsze na końcu dokumentu, na localu mi nie działa, czy problem mogą być obrazki pobierane z cache przeglądarki, bo mam ich sporo.

Test zrobiony na codepen pokazuje że kod działa poprawnie ale tam obrazki nie są pobierane z cache przeglądarki, test był wykonany dla obrazków pobieranych z loremimg czyli są zawsze ładowane i działa to bezbłędnie zawsze czeka na ostatni obrazek.


#9

Obrazki z cache powinny wskakiwać błyskawicznie.

To może pomóc:


#10

dzięki za link, teraz sprawdziłem dokładnie i okazało się że 100% obrazów jest pobierane z cache przeglądarki, średni czas to 4 ms, ale może to wina obciążonej przeglądarki, obciążonego systemu i dlatego obrazy wolno się renderują.

Obszedłem na razie problem dając sekundowe opóźnienie.

 window.addEventListener("load",function(){
        setTimeout(loadExtraFiles, 1000);
    });

A co powiecie na okno popup, lepiej robić je jako HTML czy jednak canvas daje większe pole do popisu?


#11

Heheh można i tak :smiley:

Do takiego zastosowania nie zaprzęgałbym canvasa (chyba że chcesz jakieś dynamiczne wykresy czy coś)