Jak sprawdzić, czy <img> lub tła są załadowane?

Thread View: pl.comp.lang.javascript

4 messages

[T] Back to Threads [V] Tree View [G] Group Articles

4 total messages Started by WebCM Sun, 09 Aug 2009 11:19

#49211

Author: WebCM
Date: Sun, 09 Aug 2009 11:19

39 lines
3116 bytes

Firefox traktuje stronę za załadowaną, gdy pobierze HTML, CSS, skrypty
i wszystkie obrazki <img>. Nie wiem, jak jest w IE. Dodatkowo Opera
pobiera obrazki dopiero wtedy, gdy są potrzebne - przynajmniej starsze
wersje.

Tworzę nową platformę dla gry logiczno-przygodowej. Postanowiłem, że
obrazy pokojów będą po prostu tłami. Podobnie inne obiekty znajdujące
się w nich. Po to, aby zwiększyć stabilność interfejsu.

Dopóki nie załaduje się grafika, gra wyświetla komunikat
"Ładowanie..."

Teraz nie ma takiej pewności. Jeśli prawie wszystko będzie tłem,
przeglądarka natychmiast wyświetli pierwszy pokój. Porażka na wejście.
Obrazki (tła) wciąż będą ładować się. Gracze z szybkim łączem tego
nawet nie zauważą, ale są możliwe sytuacje, w których transfer jest
mocno spowolniony. I jak tu można grać?

Preload w stylu new Image(...).src = ""; też nie jest najlepszym
wyjściem. Nigdy nie wiadomo, jak zachowa się przeglądarka. Jeżeli
mechanizm CACHE jest wyłączony - wtedy zacznie ściągać osobno grafikę
do Image i do background-image? Przeglądarka napotyka new Image().src
= "" i rozpoczyna pobieranie obrazka. Następnie zauważa background-
image: url(). Czy wtedy czeka po prostu, aż pobierze się new Image
()... czy pobiera go drugi raz równorzędnie? Chodzi o wszystkie
przeglądarki.

Teraz inna sytuacja. Pobieram kod XHTML za pomocą AJAX. Tam znajdują
się obrazki <img>. Mogę przejść dalej, gdy są załadowane. Tylko jak to
sprawdzić? Własność responseText wyniesie 4, gdy przeglądarka pobierze
XHTML, ale obrazki mogą wciąż ładować się. Czy w tej sytuacji
pozostaje tylko preload new Image() albo document.getElementsByTagName
('img') i sprawdzanie, czy został pobrany...?

Dlaczego AJAX? Otóż na początku pojawi się widok wszystkich dostępnych
etapów. Po kliknięciu 1 z nich do akcji wkracza AJAX, który ładuje
XHTML.

Zatem co radzicie?

Re: Jak sprawdzić, czy <img> lub tła są załadowane?

#49213

Author: Peter
Date: Sun, 09 Aug 2009 20:00

29 lines
2264 bytes

WebCM pisze:
[...]
> Zatem co radzicie?

Ja bym poeksperymentował z:

1. Stwórz 2 subdomeny na obrazki, np. images1.domena.com, 
images2.domena.com i załaduj obrazki po równo na każdą domenę. W ten 
sposób będą przeglądarki ściągały więcej w tym samym czasie 
(http://stevesouders.com/ua/results.php i 
http://code.google.com/intl/pl/speed/page-speed/docs/rtt.html#ParallelizeDownloads). 
Rzecz jasna, zależy to od każdej przeglądarki. Przy bardzo wolnych 
łączach może to niewiele pomoże, ale przy ciut lepszych da to już 
znaczne przyspieszenie.

2. Użyj czegoś na wzór: 
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/ 
W ogóle szukaj w Google "css preload images". Chociaż ta technika nie 
koniecznie musi być zawsze skuteczna. O ile pamiętam, to niektóre 
przeglądarki ściągają obrazki w CSS-ie w momencie ich generowania. W 
innym przypadku nie są one ściągane. Warto z tym poeksperymentować. Może 
nawet ktoś napisze coś więcej z własnego doświadczenia.

3. Spróbuj łączyć jak najwięcej obrazków w jeden obrazek i potem tylko 
przesuwać odpowiednio tło. Pomocne w tym może być narzędzie: 
http://pl.spritegen.website-performance.org/

-- 
Peter

Re: Jak sprawdzić, czy <img> lub tła są załadowane?

#49214

Author: Paweł Piskorz
Date: Mon, 10 Aug 2009 12:06

20 lines
1816 bytes

WebCM pisze:
> Tworzę nową platformę dla gry logiczno-przygodowej. Postanowiłem, że
> obrazy pokojów będą po prostu tłami. Podobnie inne obiekty znajdujące
> się w nich. Po to, aby zwiększyć stabilność interfejsu.

Zwiększanie stabilności przez zastąpienie img -> background? A co to
niby daje?

> Teraz inna sytuacja. Pobieram kod XHTML za pomocą AJAX. Tam znajdują
> się obrazki <img>. Mogę przejść dalej, gdy są załadowane. Tylko jak to
> sprawdzić? Własność responseText wyniesie 4, gdy przeglądarka pobierze
> XHTML, ale obrazki mogą wciąż ładować się.

Obrazki zaczną się ładować dopiero gdy ten kod wstawisz na stronie.


-- 
message[autor="PablO"]::after {
	content:"Pozdrawiam";
}

Re: Jak sprawdzić, czy <img> lub tła są załadowane?

#49215

Author: WebCM
Date: Mon, 10 Aug 2009 16:25

14 lines
1840 bytes

Ciekawe spostrzeżenia w Operze. Wyłączyłem mechanizmy cache. Przy
ładowaniu za pomocą [b]new Image().src[/b] JavaScript wczytał obrazek,
a po kilku sekundach ustawiał tło. Grafika zawsze była gotowa do
wyświetlenia.

Teraz czas na Firefoksa i IE. Jeśli zdadzą egzamin, prawdopodobnie
wykorzystam ten preloader. Firefox 3.5 w trybie prywatnym też
zapamiętuje grafikę.

Wciąż mam wątpliwości, jak starsze przeglądarki radzą sobie z
własnością [b]Image.onload[/b].

> A co to niby daje?
To, że nie można zaznaczać ani przenosić obrazów tła.

Thread Navigation

This is a paginated view of messages in the thread with full content displayed inline.

Messages are displayed in chronological order, with the original post highlighted in green.

Use pagination controls to navigate through all messages in large threads.

Back to All Threads