Ładowanie obrazków które zostaną wywołane przez kliknięcie miniaturki

[michalk]

Witam!

Chodzi mi bardziej o js niż php, ale takiej kategorii nie ma. Klient wymyślił sobie, żeby użytkownik strony nie musiał czekać na załadowanie się pełnego rozmiaru zdjęcia za długo, więc w czasie ładowania strony będę musiał też ładować duże zdjęcia. Teraz pytanie czy jest to technicznie możliwe.

Wymyśliłem sobie dwa sposoby.

1. Oparcie zdjęć na divach które są niewidoczne, ale wydaje mi się, że jeśli już będą załadowane to przeglądarka jakoś zapisze je w pamięci podręcznej i szybciej je wywoła. Żeby nie spowolnić ładowania reszty strony takie niewidoczne divy chciałem dać przed końcem body tylko czy rzeczywiście ładowanie elementów strony następuje zgodnie z kolejnością od góry do dołu? Może pytanie głupie ale nie zagłębiałem się nigdy w schemat działania przeglądarki.

2. Dodanie funkcji js która zostanie wywołana dla akcji OnLoad w znaczniku body i która zacznie ładować zdjęcia. Pytanie jak coś takiego zrobić.

[Veal]

Jeśli używasz jquery:

https://www.innovatingtomorrow.net/2008/04/...-content-jquery

https://plugins.jquery.com/project/cacheimage

Jeśli nie poszukaj pod frazami preload, precache etc.

[stat4seo]

a nie wystarczy <img style="display:none;" src="" /> ?

[michalk]

Właśnie o czymś takim myślałem pisząc o niewidocznych divach, zastanawiało mnie tylko w jakiej kolejności ściągane są dane z serwera. Czy przeglądarka idzie zgodnie z kolejnością kodu źródłowego.

Dzięki Veal, sprawdzę to.

[spookypld]

tak, przeglądarka idzie dokładnie wg kodu z góry na dół (ale pierwszeństwo ma raczej HTML). dlatego m.in. pliki .js powinno się umieszczać po plikach .css

https://developer.yahoo.com/performance/rules.html - tu i tu https://developer.yahoo.com/yui/imageloader/

[Mion]

Napisałeś niedorzeczność z tym pierwszeństwem HTML , bo javascript i CSS to nie HTML

[spookypld]

czemu niedorzeczność? css i js są zewnętrzne, więc pierwszeństwo html nie jest nonsensem.

[Mion]

No to wytęż szare komórki i przeanalizuj żądanie GET dla zrealizowania pobrania strony, a może zrozumiesz gdzie tkwi błąd rozumowania z tym HTML'em