Jak sprawdzić czy wszystkie grafiki na stronie zostały wczytane?

Question

Chcę stworzyć uniwersalny loading screen, którego będzie można użyć w dowolnym momencie podczas wczytywania danych więc $(document).ready nie wchodzi w grę. Zależy mi na funkcji do której wystarczy podać jakie pliki graficzne mają się wczytać na stronie lub jakby się dało, sama by to odczytała. Nie używam znaczników img gdyż w css mam o wiele większą kontrolę nad grafiką. Niemniej jednak w narzędziach programistycznych jest zakładka która pokazuje wczytywanie się plików w tym graficznych. Chcę aby moja funkcja również rozpoznawała jakie pliki zostały wczytane aby można było to wyświetlić pod animacją wczytywania np w wartości procentowej lub po nazwach plików.

Próbuje coś takiego wykombinować z jquery i ajaxem jednak efekty nie są takie jakbym chciał dlatego szukam pomocy tutaj.

Answer 1

Pakuj obrazki w obiekty Image i czekaj na ich zdarzenie load.

Comments

Ok. Ale jak to zgrać z css? Czy można to jakoś zsynchronizować bo ścieżki mam podane w css. Czy wywalić ścieżki z css i po załadowaniu wgrać je do divów javascriptem?

---

Można pobrać ścieżki z CSS-a albo po wczytaniu JS-em wygenerować odpowiedni CSS.