A Webmánián “RDD billentyűzetéből potyogott ki” egy elég jó összefoglaló a CSS manócskákról – foglalmam sem volt, hogy ezeket így hivják.
Ennek a technikának a felhasználása ritkán terjed ki a rolloveres menükön túlra. Pedig – mint az említett bejegyzésben a Google-os példán keresztül is láthatjuk, ez a technika remekül használható az oldal “statikus” (nem változó) elemeinek megjelenítésére is. Extrém esetekben nem csak a funckionális részek, hanem a tartalmi rész képi elemei is letudhatók egy nagy kép használatával.
Egy korábbi bejegyzésben már írtam arról a webshopról, amiben szükség volt ennek a nagyképes technikának használatára. Ebben az esetben az egy oldalon megjelenő termékek száma igen nagy volt, és az oldal első betöltődése – a kisképek miatt – igen sok HTTP lekérést generált, amit ráadásul nem minden böngésző tud párhuzamosan letölteni. Az oldal különlegessége továbbá, hogy egyféle terméket forgalmaz (notebook), és ezek megjelenési sorrendje mindig azonos (ár szerint), viszont különböző szűkőkkel lehet válogatni a kínálatból, így a megjelenített termékek halmaza szinte bármi lehet.
Nem akarok hosszú kódsorokat bemásolni, de a megoldás lényegét leírom.
Amikor a felhasználó az oldalra téved, lát egy alap “szűrést” a termékekből, ez egy bizonyos halmaz. Ilyenkor a webszerveren a következő dolgok történhetnek a kép ügyben:
- A PHP megnézi, hogy létezik-e legenerált mozaik – kisképeket tartalmazó nagy kép – ahhoz a bizonyos “termékkontstellációhoz”.
- Ha létezik, visszaadja annak a képnek a nevét. Egy MySQL táblában tárolódnak a halmazokhoz tartozó nagy képek nevei.
- Ha nem létezik, elkészíti a mozaikot, minden kisképet (thumbnail) sorrendben egymás mellé helyez, elmenti a táblába, és a mentett kép nevét visszaadja
Kisképek egy nagyon
A site renderelésénél a böngésző egy nagy képet tölt le (ami ráadásul a JPEG tömörítés sajátságai miatt általában kisebb is, mintha egyenként töltenénk le a sok kisképet), és annak megfelelően helyezi el egy DIV elem háttereként, hogy melyik termékről van szó. Ez azért is jó, mert már a képek betöltődése előtt elkezdődhet a site megrajzolása.
A nyitóoldal termékhalmaza viszonylag állandónak nevezhető, így a legtöbb esetben egy régi, már legenerált kép jelenik meg. Amikor megszületett az ötlet, féltem, hogy a GD lassú lesz egy esetleg több száz kisképet tartalmazó nagykép generálásához. Szerencsére nem így lett, nagyon jól teljesít sebességben.
A felhasználó egyik fontos interakciója, hogy a szűrőkkel változtatja a mejelenő termékek halmazát. Természetesen ekkor nem generálunk az új halmaz minden elemével új képet, hanem csak azokkal, amelyek még nem jelentek meg. Azt, hogy melyik kép van már meg a böngészőnek letöltve, Session-ben vagy Cookie-ban tároljuk (el kell találni a böngésző cache-elési viselkedését). Egy szűrés általában szűkítést jelent, így a teljes képállomány a cache-ből jöhet. Új halmaztagok esetén pedig egy kisebb méretű új kép kerül letöltésre.
Az oldal használata során elég sok lehetséges kombináció kerül legenerálásra, és ezek mentése kíméli a szervert. Az elékszült képeket viszont az esetleges változások miatt pár naponra törli a crontab.
Termékhalmaz változása és a kisképek gyorsítótárazása
