Ładowanie części grafiki (tilów), Podobnie jak w google maps. Opcje

[hao]

Witojcie! :-)

Proszę o nakierowanie mnie nieco jak zabrać się za coś takiego, jak ładowanie obrazków widocznych na stronie.
To znaczy:

Mam diva z overflow:hidden, lub iframe.

W nim jest struktura 100x100 różnych tilów w sumie o wiele większa niż okno (dla przykładu).

I jak teraz zrobić, aby ładowały się tylko obrazki widoczne?

może coś się da z mintAjaxem ?

Dzięki za cokolwiek i pozdrawiam

[Gorgeus]

a nie mozesz dla tego diva/iframe dodac display:none ?

[sowiq]

Nakierowanie mówisz...

Po pierwsze, najważniejsze: (nie dotyczy Opery) jeśli w kodzie HTML masz 100 razy <img...>, nawet jeśli 99 z nich jest akurat niewidocznych, to i tak załaduje się wszystkie 100 obrazków.

Dlatego żeby móc ładować tylko widoczne, musisz porównywać pozycję/scroll widocznej części div'a z rozmiarami obrazków aktualnie widocznych (bo na początku widać jakieś startowe). Jeśli stwierdzisz, że obrazek jest na tyle przesunięty w którąś stronę, że widać kawałek innego, wtedy przy pomocy JS dodajesz kolejny element <img...>, albo robisz 'sztuczkę magiczkę', która odblokuje wczytanie się kolejnego obrazka do istniejącego elementu <img...>.

Trzeba też pamiętać, żeby usuwać dynamicznie niewidoczne już elementy, a nie tylko cały czas dodawać nowe, bo może się okazać, że taka aplikacja pożera sporo pamięci RAM.

Tak to widzę. Nie robiłem nigdy wcześniej czegoś takiego, ale jeśli bym się zabierał, to mniej-więcej w ten sposób

Ten post edytował sowiq 17.09.2008, 00:50:18

[hao]

Dokładnie macie rację - niestety tą teorię już mam i ja :-)
Kłopot zostaje tylko w tym jak wynaleźć tylko te elementy które są widoczne na stronie (np. w iframe 800x600). Czyli skrypt "bada" - jeśli cokolwiek oprócz kodu html jest w oknie między 0x0 a 800x600 (na przykład) to ładować. Jeśli nie - to wywalać.

Chociaż nawet to wywalanie jest IMHO niepotrzebne. Chyba każdy ma na tyle ramu, żeby zachować te z 40-50MB obrazków nawet.

:-\

[sowiq]

> Kłopot zostaje tylko w tym jak wynaleźć tylko te elementy które są widoczne na stronie (np. w iframe 800x600).

Moim zdaniem iframe nie jest najlepszym rozwiązaniem. A to dlatego, że np. za pomocą JS możesz odczytać takie właściwości DIV'ów (np.) jak scrollLeft i scrollTop.
Jak znaleźć elementy? Prosty przykład - okno 50x50, obrazki masz po 10x10, czyli na raz mieści się 25. Wiesz, że scrollTop okna wynosi 20, więc odpadają dwa górne wiersze, a trzeba doczytać dwa nowe u dołu. Podobnie ze scrollLeft.
Zakładając, że przy ładowaniu tej 'mapy' masz jakieś warunki początkowe, tzn ustawiasz sobie na początku jakoś i wiesz które elementy się wyświetlają.


> Chyba każdy ma na tyle ramu, żeby zachować te z 40-50MB obrazków nawet.

Odpal sobie 50 MB obrazków w Firefoxie

[hao]

No dobra. Znalazłem takie coś (jako, że w Java to ledwo raczkuję):

http://www.jaslo.name/mapa/

Próbowałem zmieniać tak kod, aby ładować wiele obrazków w pozycji absolutnej.
Dzięki temu mógłbym pokazać np. domek, po najechaniu na który pojawi się chmurka (np. overlib)
...ale niestety.... moja dupa być :/

A potrzebuję: mapa + domki + skok do jakiegoś miejsca na mapie.

pomocy

[sowiq]

Hehe, człowieku, jak masz tyle, to masz już wszystko Obrazki mapy nie muszą być position:absolute Wystarczy, że zrobisz sobie tak ten domek. Masz z tego nawet więcej korzyści, bo dajesz mu left i top względem jakiegoś obrazka/punktu na mapie. Po przesunięciu mapy po prostu robisz refresh i domek sam Ci się ustawia w odpowiednie miejsce. Chmurka analogicznie, ale względem domku

Jak zrobisz jakieś demo, to się pochwal