rychlejsie nacitanie viacerych obrazkov naraz

mam na stranke asi 15 odkazov ktore su len ako obrazok, riesene cez css takto:

#link5 a{background: url(imgs/link5.png);}

avsak tie obrazky su velke cca po 5 kB (png 128*128) a dokopy maju asi 80 kB, kedze sa nacitava kazdy subor po jednom tak to trva aj par sekund

je to velmi jednoducha page a rychlost nacitania je dolezita, dalo by sa to nejak spravit, aby sa tie vsetky obrazky nacitali z jedneho suboru? vtedy by to trvalo max sekundu, napr. ze ich spojim do jedneho velkeho a pri kazdom odkaze nastavim aby mi to zobrazilo len urcitu cast obrazka ..ale vtedy budem musiet stale upravovat ten jeden obrazok ak budem chciet pridat dalsi odkaz ..cize moc zlozite (a bude to vobec fungovat?)

alebo keby sa dalo nejak ich zazipovat (lol? da sa to? )

a upravovat obrazky na jpeg ci gif nechcem lebo to bude skarede

diky za napady

Urobis si jeden obrazok vysoky 128px a siroky podla potreby napr. 1280px (10 obrazkov). Nazves ho napr. links.png
Potom nastavis taketo CSS
Ten obrazok sa bude nacitavat zhora nadol takze sa ti budu postupne zhora nadol nacitavat vsetky odkazy. Zdoradznujem naraz. Ale podla mna bude celkova doba nacitavania prakticky rovnaka.

EDIT//
Este chcem doplnit ze ten isty obrazok mozes pouzit aj ako hover. Asi takto
Vtedy urobis ten obrazok links.png vysoky 256px a v "druhom riadku" budu obrazky pri hovri. Ma to este jednu vyhodu a to tu, ze obrazok sa nacita hned a nie az ked ukazes mysou na obrazok.

Toto fungovat nebude...

Ale keď použije záporné hodnoty, tak hej....
Samozrejme ten link musí mať pevne danú šírku.

darson, a čo v prípade, že bude potrebovať jeden alebo viac linkov zmeniť? príp. pridať, odobrať..? pri každej blbosti robiť obrázok odznovu...
zaujímavý postup toto by som teda nikomu neradil robiť

neda sa ti zmenit obrazok na jpg a znizit jeho kvalitu? ak mas pevnu polohu odkazov na stranke a kazdy obrazok bude iny, vyrez si aj s pozadim (co mas za png) a uz iba spravne umiestni , ak znizis onieco kvalitu obrazku nebude to badatelne a par kb odstranis ale skus rozne nastroje na zmensovanie objemu , myslim ze yahoo nieco take ma ..

//Edit : http://developer.yahoo.com/yslow/smushit/

DARSON: aj presne toto som mal na mysli, avsak som nevedel ako na to, diky za postup, idem to vyskusat a ak to predsa nebude fungovat uz to nejak opravim

walther: vopred som rozmyslal nad tym ako zlozita bude zmena jedneho linku ale ak ostatne riesenia budu kvalitou ovela horsie tak to budem robit cez ten DARSONov navod, obrazok predsa nebudem robit uplne odznova, jednoducho zmenim danu cast obrazku

don jebot: dobry napad, myslim ze to skusim najprv takto, ze ma to nenapadlo ked som sa bal ze kazdy obrazok bude mat biele pozadie hehe ..tie png mali totiz priehladne pozadie, zmena obrazka na jpg format by mala priniest predpokladam tak 2-3 nasobne zmensenie obrazkov len dufam ze nebude problem s tym ze ich bude tak vela ako predtym ale myslim ze by sa to malo zrychlit
btw ten tool smushit moc nepomohol, usetrilo asi 20 b na obrazok


idem to vyskusat


//EDIT
tak som to spravil ako vravel don jebot, zmenil som obrazky na jpg a pridal rovnake pozadie, a nacitava sa to ihned velkost sa znizila 2,2 krat takze to bolo koli velkosti a nie koli poctu obrazkov (to dlhe nacitavanie)...diky

Taketo kecy si nechaj pre seba! Pouzivam to uz dlho a vzdy to fungovalo. Ak ma chces presvedcit tak uved jeden FAKT preco by to nemalo fungovat.



Ak bude chciet nejaky link pridat. Jednoducho otvori Photoshop, zvacsi jeho sirku o 128px a tam prilepy novy link. Praca na 20 sekund.

Ak bude chciet nejaky link zmazat, jednoducho ho z obrazka vystrihne a miesto co po nom ostalo necha priesvitne(je to png format). Praca na 5 sekund.

Ked bude chciet nieco upravit tak ten obrazok otvori, upravi a ulozi Nic zlozite

A este jedna vec. Ten link co sem hodil don jebot pouzivam aj ja a mozem odporucit.

Ak ale chces mat vsetky obrazky v jednom subore tak toto je najjednoduchsie riesenie.

...
Nech sa vyjadria iní...

camo - k čomu sa majú vyjadriť iný? Je to normálne používaná a funkčná technika, nechápem čo potrebuješ ešte riešiť.

Predsa som to tam jasne napísal.
Musí tam byť záporná hodnota. Obrázok sa predsa pri kladných hodnotách posúva zľava doprava. Musí tam mať záporné hodnoty, inak nič neuvidí...

Aha, máš pravdu, ja som ten jeho kód prebehol iba pohľadom (videl som tam background-position, tak som to neriešil).
Samozrejme, hodnota musí byť záporná.

Ale uvidí! Pred tým ako napíšeš dalsiu takuto blbost by si si to mohol odtestovat. Ja som to odtestoval a ide mi to. S tym posuvanim obrazku zlava doprava mas samozrejme pravdu ale to pozadie sa opakuje. (background-repeat: repeat;) Takze aj tak to ide

darson - aby si nepovedal, že som zlý, tak máš možnosť:
1. buď odkáž na ukážku, kde ten tvoj funguje
2. alebo za tvoje vystupovanie (a aj za tú druhú dnešnú tému) dostaneš BP. Ak sa nemýlim, bude to tvoj druhý v priebehu mesiaca. Tak si daj záležať.

A naco chces dokaz??? Ty mi neveris ze to funguje? Ved si sam napisal ze je to funkcna technika. Ake ked neveris tak tu to je http://zahadyufo.php5.sk/shaggy/ A uz ma neprovokuj. Mimochodom... ako hover som nemenil farbu ani nic podobne ale som to posunul o 20px

DARSON, dik za navod, skusil som ho a funguje, avsak ako vravia ostatni, aby som ukladal tie obrazky zlava doprava musim pouzit zaporne hodnoty, ak som pouzil kladne, linky idu dozadu ..cize fungovat to bude, ale so zapornymi hodnotami je lepsie riesene to ukladanie obrazkov za sebou, a myslim ze nakoniec pouzijem tento tvoj navod, predsalen je to "čistejší" a kvalitnejsi sposob ako ked som skonvertoval obrazky do jpg aj s pozadim, pretoze aj tak ich musim otvarat photoshop ..a tie linky nebudem predsa menit kazdy den

este raz, diky vsetkym, vsetky rady boli uzitocne ..... PEACE

Darson:
Ty si génius!!!
Túto skvelú ba nebojím sa napísať prelomovú techniku tu naozaj poznáš iba ty a potom ešte asi dvaja ľudia na DJPW. Len nikto z nás, ťa doteraz nechápal(ako pravého génia).
Kde sa ostatný pospolitý ľud na teba hrabe

PS:Aký peace?! Čo sú to za trápne frázy???
Sa naučte slušne chovať a bude pokoj === peace.
Bez toho to nemá logiku a to je prostý fakt!!! Programátori predsa milujú logiku, nie??

Neviem co stale chces. Co tu stale riesis. Denne mi napises 10 sukromnych sprav a este pises aj do vlakna taketo blaboly. Ako povedla shaggy
A uz bud pls ticho fakt nemam na teba nervy

stuzka napis mi prosim co je na tom zle ... nech viem bo mne to funnguje v opere,ff,ie6, ie7 ...

aj mne unikol zmysel tohto prispevku ..naco su tie nadavky? ...ten peace som pouzil aby ste sa vsetci upokojili, co je na tom trapne? ..DARSON ukazal ze to funguje na tom linku, tak v com je problem? ..a ano pouzijem zaporne hodnoty aby som tie obrazky usporiadaval pekne za sebou cize aj ty ste mali obaja pravdu..



tuto cast nechapem zvlast

wollodya, tomu sa hovorí sarkazmus

Gratulujem Darson, vyslúžil si si BP.
Lebo len u primitíva ako ty (áno, si primitív, pretože nadávaš ostatným, máš vulgárny tón a pritom nemáš pravdu) môže mať Link 2 v pozadí napísané Link4.
Máš pocit, že to funguje? Ja nie. Áno, napísal som, že je to funkčná technika, nie že tvoj kód je funkčný (lebo som si nevšimol, ako máš zapísané v CSS hodnoty).

A ako si to povedal ty:

Druhý BP = BAN, čiže budeš fakt ticho.