onload + background-image, gdy wszystkie tła zostaną załadowane Opcje

[WebCM]

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.

Zatem co radzicie?

[erix]

Preload w stylu new Image(...).src = ""; też nie jest najlepszym wyjściem. Nigdy nie wiadomo, jak zachowa się przeglądarka.

Jak nie wiadomo?

window.onload jest wyzwalany wówczas, gdy wszystkie elementy zostaną wczytane, AFAIK tła również, więc skorzystaj z tego zdarzenia.

[WebCM]

Opera nie wczytuje od razu ukrytych <img>. To się sprawdza w przypadku stron internetowych, ale gorzej z grami, jeśli ktoś ma wolne łącze lub spowolnienie. Co do window.onload to jednak masz rację - sprawdziłem w Operze. Chociaż wg dokumentacji Firefoksa tła nie muszą być jeszcze załadowane.

Wyłączyłem mechanizmy cache. Przy ładowaniu za pomocą new Image().src JavaScript wczytał obrazek, a po kilku sekundach ustawiał tło. Grafika zawsze była gotowa do wyświetlenia. Tak samo w Firefoksie nawet w trybie prywatnym.

Tylko zastanawiam się, czy nie wczytywać poziomów za pomocą AJAX. Wtedy sposób z window.onload odpada.

Ten post edytował WebCM 10.08.2009, 19:53:45

[erix]

No to wtedy masz new Image i licznik.

[WebCM]

Jeszcze jedno pytanie. Polecenie new Image(...).src = 'obraz.png' wczytuje grafikę. W tym samym czasie przeglądarka napotyka w pliku HTML lub arkuszu CSS własność: background-image: url(obraz.png). Czy starsze przeglądarki będą wtedy pobierać obraz 2 razy? Zakładamy, że new Image() nie zdążył wczytać go do końca. To dla mnie ważne, aby niepotrzebnie nie marnować transferu przy dużej liczbie graczy.

[erix]

Nie. Z tego, co mi wiadomo, to przeglądarka cache'uje to, co może.

No chyba, że masz nagłówki zwalone, to wtedy wczyta dwa razy. (IMG:style_emoticons/default/tongue.gif)

[zegarek84]

ale co do nagłówków - coś napisał to też tak nie powinno być gdyż obrazki są w jednym obrębie dokumentu - jednak nie sprawdzałem - ciekawe pytanie - najlepiej by było sprawdzić to dając kilka obrazków na stronie tych samych a z obrazkami wysyłać nagłówki zabezpieczające przed cache i zerknąć do firebug'a czy są wysyłane do serwera zapytania a jeszcze lepiej do Live HTTP HEADERS (jakoś mi ta wiedza nie była potrzebna to nie sprawdzałem - ale jeśli ktoś się upewni na 100% lub ma chęci to niech sprawdzi i napisze (IMG:style_emoticons/default/winksmiley.jpg)

co do cache to bardziej istotne przy następnym wejściu na daną stronę - jest opcja że anwet nie zostanie wysłane zapytanie o dany obiekt, zostanie wysłane zapytanie i zwrócona odpowiedź not modyfied lub zostanie wysłane zapytanie i pobierze odnowa (IMG:style_emoticons/default/winksmiley.jpg)

[erix]

coś napisał to też tak nie powinno być gdyż obrazki są w jednym obrębie dokumentu - jednak nie sprawdzałem - ciekawe pytanie

1. ciężko Cię zrozumieć
2. przeglądarki nie pobierają dwa razy tych samych danych, jeśli wyraźnie im tego nie rozkażesz (vide: nagłówki/CTRL+F5)