Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: onload + background-image
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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
Cytat
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.
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. 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 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 winksmiley.jpg
erix
Cytat
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)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.