ďťż

[JS] onload + background-image gdy tła zostaną załadowane

Podstrony

telcocafe

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?

Możesz zapakować obrazek do wnętrza skryptu jako base64. Nie jest może to zbyt piękne, ale powinno być dość wygodne, jeśli całą grafikę do poziomu umieścisz jako jeden plik i będziesz go używał w połaczeniu z background-position(tak jak google).

Przecież obiekty typu Image mają właściwość complete.
@someone:
Microsoft nie postarał się i IE nie obsługuje base64.

Base64 nie ma sensu - po co za każdym razem ładować wszystkie obrazki ponownie? Szybciej z cache przeglądarki.

Ewentualnie pozostanę przy znacznikach <img>, ale wtedy przydałoby się zablokować możliwość zaznaczania obiektów.

Co do new Image = {} - nie mam pewności, że przeglądarka zapisze obrazek w cache. Jeżeli dojdzie do sytuacji, że zacznie ściągać osobno grafikę do Image i do background-image, to lepiej szukać innego rozwiązania. 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.

Base64 nie ma sensu - po co za każdym razem ładować wszystkie obrazki ponownie? Szybciej z cache przeglądarki.
Można je zapakować w plik js i też polecą z cache ;) Przegladarki teraz cachują wszystko jak leci.

Microsoft nie postarał się i IE nie obsługuje base64.
Hm byłem przekonany, że IE od siedem w górę już to obsługuje(Allegro tools pisane z myślą o IE ma ikonki kodowane w base).

Co do new Image = {} - nie mam pewności, że przeglądarka zapisze obrazek w cache.
Takiej pewności nigdy nie ma, w zdecydowanej większości przypadków przeglądarka sprawdza na kilka sposobów, czy ma podobny plik w cache, nie zacznie też pobierać drugi raz tego samego pliku z tego samego url'a, chyba, że dostanie nagłówek no-cache. Oczywiście to wszystko typowe zachowania, ale 100% pewności nigdy nie będziesz miał bo to nie Ty konfigurujesz przeglądarkę.

Możesz sobie też zrobić przejściową stronę "Ładowanie", która ściągnie to wszystko i onload przejdzie do właściwej gry.

Ale to wszystko kombinowanie, jak koń pod górę.

IMO spokojnie wystarczy normalnie preloadować obrazki do tablicy kozystając z wspomnianego przez Andrzeja complete, 100% skuteczności i tak nie osiągniesz, a zmarnujesz dużo czasu.
Użytkownik someone edytował ten post 09 sierpień 2009, 02:02
Mimo wszystko pakowanie do base64 jest niewygodne - po każdej zmianie. PHP tutaj nie wykorzystuję.

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...?

Niestety tak. Możesz też zrobić coś innego. Ładować obrazy obiektem new Image(), a później dopiero wyświetlać treść innerHTML. Tak samo z Ajaksem. Ściągasz, np., XML z treścią i skryptami. Wywołujesz skrypty (czyli ładujesz obrazy new Image()) i wyświetlasz treść.
Jeśli chodzi o to, że obrazy mogłyby nie być ładowane do cache, to powiem Ci, że wywołując new Image(), gdy na stronie jest element IMG lub element z tłem, obraz jest pobierany równolegle.

Ciekawe spostrzeżenia w Operze. 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.

Teraz czas na Firefoksa i IE. Jeśli zdadzą egzamin, prawdopodobnie wykorzystam ten preloader.

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

;/ Nie masz co robić, tylko bawić się w archeologa? Jeśli tak się tym martwisz, zainstaluj sobie stare wersje przeglądarek i nie będziesz miał takich problemów.

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

Chłopie Ty kiedyś umrzesz z głodu sprawdzając, czy pomidory równo na kanapce leżą :)
Te przeglądarki to margines, większa jest szansa, że ktoś ma jakiś dziwny filtr w adblocku i przez niego coś się rozlazie.
Dokładność ważna rzecz, ale choćbyś się skręcił to zawsze będzie kilka % komputerów, które wyświetlą sieczkę.

Wiecie co? Jednak window.onload jest uruchamiany, gdy załadują się wszystkie obrazy i TŁA. Sprawdziłem w Operze i Firefoksie. Nie wiem, od czego to zależy. Być może przeglądarka wykrywa, czy tło prezentuje treść czy jest tylko dodatkiem.

Jednak prawdopodobnie zostanę przy AJAX i new Image().src. :) Ostatecznie window.onload.
Użytkownik Ferrari edytował ten post 10 sierpień 2009, 23:43

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL