PreLoad for tung side eller andet forslag!

Tags:    php

Hej Udvikleren.

So i efterhånden godt ved har jeg min foto side www.kp-foto.com.
Når man går ind på www.kp-foto.com starter man på index.php sien som loader fint.
Hvis man så trykker på billedet og entrerer siden, kommer man ind på default.php.
Det er her problemt kommer, jeg har nemlig et slideshow der kører i banneren øverst på siden, og når man loader siden viser den i et sekund eller to alle billederne under hinanden, inden de falder på plads.

Derfor søger jeg lidt en løsning på dette problem.
Jeg går ud fra det er fordi HTML filen skal loade alle billederne ind fra mysql databsen, samttidig med at den afvikler et hav af andre funktioner inde i filen.

Derfor tænkte jeg om man måske kunne lave en form for "preload" af default.php når man er inde på index.php
Så ville siden allerede være i folks cache og default.php ville ikke lave det korte billed fuck up.

Ud over det har jeg optimeret siden på manger måder, alle javascrpits ligger i eksterne filer der bliver kaldt, alt css ligger i ekstern fil osv.


Hvad tænker i?



7 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 17 karma
Sorter efter stemmer Sorter efter dato
Hej Kristian.
Jeg sidder på en 20mbit forbindelse, med en rimelig maskine og synes altså ikke forsinkelsen gør det store.

Men for at forsøge at besvare dit spørgsmål;
Den mest udbredte måde er nok at benytte Javascript. Da JS allerede indeholder funktionaliteten, er opgaven hurtigt løst.

Hvis du, som jeg selv, gerne vil undgå Javascript, så vidt muligt (Det lader det nu ikke til, taget din kildekode i betragtning :)), kan du forsøge at cache billederne på besøgerens maskine ved at lade billederne indlæse på index.php men holde dem skjult med css.

Eksempel 1, Javascript:
http://www.daniweb.com/web-development/web-design/html-and-css/threads/7875/38388#post38388

Eksempel 2 HTML/CSS:
Fold kodeboks ind/udHTML kode 


I dit stylesheet laver sætter du så dette id til ikke at blive vist:
Fold kodeboks ind/udCSS kode 


Håber det kan hjælpe

Edit: Vil gerne høre om Michaels forslag med "overflow:hidden;" løser problemet?



Indlæg senest redigeret d. 25.10.2011 10:25 af Bruger #16824
Jeg tænker mange ting... hele tiden! :)


For at svare på dit spørgsmål:
Sæt "overflow: hidden" - på din slideshow container



Indlæg senest redigeret d. 25.10.2011 10:28 af Bruger #10216
Husk at udviklerværktøjerne kan være en fantastisk hjælp. :)

Firebug til firefox.
IEs eget udviklerværktøj.
Chromes eget udviklerværktøj.



1: Gzip hele lortet

2: Drop det 100% jpg komprimering, det er web ikke tryk, de skal ikke fylde fra 300 til 1000kb stykket.

For billeder:
Request Count: 32
Bytes Sent: 15.464 (headers:15464; body:0)
Bytes Received: 14.837.422 (headers:9599; body:14827823)


3: Sikre client cache, udenom browserens default behavior, der er ingen cache control på. http://www.mnot.net/cache_docs/

Cache:
Cache-Control: no-cache
Pragma: no-cache

/J






Gzip komprimere bare dataen yderligere, der er selvfølgeligt ikke det store at spare på billeder måske 4-5% i størrelsen, da de allerede er godt komprimeret i forvejen, sendte du ukomprimeret bitmap billeder ville besparelsen være endnu højere.

Men det er godt egnet til txt, som html, javascript og css

Client cache er nogle parametre man sender med et request, men lad bare folks browsere håndtere den hvis det er helt nyt for dig.

Dog forstår jeg ikke hvorfor du ikke bruger jquery's cykle preload af billeder, altså som de selv foreslår, hente de 2 første billeder ved start, og efterfølgende preloade og vise de sidste.. Og sikre så at størrelsen er markant mindre, så vil det hele glide perfekt, og man behøver kun hente 2 billeder på forsiden, på max 500kb totalt:

http://jquery.malsup.com/cycle/add3.html
/J



Tak for forslagene til jer begge.
Michael jeg tror jeg går efter dit forslag, da det lyder mest simpelt.
Jeg har nu prøvet at indsætte overflow: hidden; go get virker, problemet er at nu er der kommet en eller anden større margin over billedet???
WTF?

Ved du havd det kan være?
Stani, hvis ikke vi får det til at køre med css så går jeg efter dit foralg med JS, det med preload af billederne bliver omfattende da der er 25 billeder og jeg konstant udskifter billederne i databsen hvorfra de bliver hentet.

Så fik jeg det endelig til at køre!
Hold kæft det CSS kan drille.
Tak fro en hurtig og nem løsning på problemet Michael!
vh
KP



Indlæg senest redigeret d. 25.10.2011 12:09 af Bruger #16627
He Jokke.
Tak for dine bud også.
Jeg tror jeg vil sætte billederne ned, det har du ret i, de behøver slet ikke have den tunge kvalitet de har nu, til web.

Det med at "Gzippe" og "Sikre client cache" har jeg absolut ingen anelse om hvordan man gør, eller hvad er! ;)

vh

KP



t