ugrás a tartalomhoz

Css - image preload

inf · 2012. Júl. 2. (H), 19.24
Szép napot mindekinek!

Van valakinek tapasztalata a css hover háttérkép előtöltésben?

Ami biztosan nem működik (legalábbis nálam)
body:after{content: url(file.png);display: none;}
Valami olyat szeretnék, ami nem használ html tageket, csak tiszta css-t...
‹ Adatküldés overlay ablakban JS változó érvényessége egy függvényen belül ›
 ■
1

Sprite

Poetro · 2012. Júl. 2. (H), 19.28
Használj sprite-ot, és ha valahol használod egy darabját, akkor ugye az elő lesz töltve.
4

Gondoltam erre a megoldásra

inf · 2012. Júl. 2. (H), 21.10
Gondoltam erre a megoldásra is, de egy előtöltő beillesztése kisebb energia befektetéssel jár, mint egy sprite készítőjé. (nem statikus képekről van szó, ezért a fájl feltöltés űrlapot is át kéne írni hozzájuk, és az adatbázisba is be kéne túrni, hogy egy képet tároljon kettő helyett... szóval ha úgy tetszik emiatt a "tervezési hiba" miatt ez nem jöhet most szóba)
2

JavaScript?

T.G · 2012. Júl. 2. (H), 20.39
JavaScript-es megoldás nem jöhet szóba?
Egyszerű és nagyszerű: http://ajaxian.com/archives/preloading-images-with-jquery
3

Igyekeztem olyan megoldást

inf · 2012. Júl. 2. (H), 21.07
Igyekeztem olyan megoldást találni mindenhol, hogy menjen js nélkül, ez meg egy olyan probléma, ami szerintem megoldható nélküle.

Kipróbálok olyat, ami nem tiszta css, végső esetben csinálok egy "display: none" vagy egy "position: absolute; visibility: hidden" img tag-et minden képnek, aztán szevasz.
5

Végül emelett döntöttem. A

inf · 2012. Júl. 2. (H), 21.54
Végül emelett döntöttem. A display: none-ról azt írták, hogy nem működik mindenhol. Ez megy.

.image-preload {
    position: absolute;
    visibility: hidden;
}


<img src="file.png" class="image-preload" />
6

Ha a CSS-be belerakod

Karvaly84 · 2012. Júl. 2. (H), 23.04
Ha a CSS-be belerakod binárisan a képet az nem müködik? (base64 kódolással)
7

Ú hát nekem az elég extrémnek

inf · 2012. Júl. 3. (K), 00.12
Ú hát nekem az elég extrémnek hangzik :D Ebben a projektben nem, de mindenképp kipróbálom, mert tetszik az ötlet :-) Van valami linked is a témában?
8

Innen kiindulva rá találsz

Karvaly84 · 2012. Júl. 3. (K), 00.37
Innen kiindulva rá találsz mindenre :) A lényege az hogy bizonyos bit mintákat ascii karakterre kódol így egy text fájlban tárolhatsz bináris adatot.
9

Ismerem a base64-et, csak nem

inf · 2012. Júl. 3. (K), 01.04
Ismerem a base64-et, csak nem tudtam, hogy css fájlban is át lehet vele küldeni képet.
10

Igaz, onnan indulva is

kuka · 2012. Júl. 3. (K), 08.05
Igaz, onnan indulva is megtalálható. De a közvetlen link azért gyorsabb: Data URI scheme.
12

Köszi :-)

inf · 2012. Júl. 4. (Sze), 13.47
Köszi :-)
11

Feltétlen külön kép kell?

Pepita · 2012. Júl. 3. (K), 23.58
Kicsit félve kérdem: itt neked nem lehet jó megoldás, ha hozzáteszed az alapképhez a hovert is, és backround-position -akárhány px; amikor hover? Tudom, ez kétirányú repeat, stb. helyzetekben nem jó, de a hover-ről erre asszociáltam.

A CSS-be binárisan érdekelne, ha sikerül!
Bár azt nem tudom, hogy a böngészők elkezdik-e feldolgozni a CSS-t teljes letöltése előtt? Mert ha nem, akkor a képes preload-CSS-t külön kell küldeni a kliensnek, ami már nem biztos, hogy annyira jó.
13

Az elsőt, amit írtál

inf · 2012. Júl. 4. (Sze), 13.49
Az elsőt, amit írtál sprite-nak hívják.
A data ur scheme-nél kíváncsi vagyok, hogyha a css-be teszem be a képfájlokat, akkor vajon lassabb lesz e az oldal formázása. Ezt mindenképp tesztelem, mert szerintem elég érdekes, hogy így is lehet továbbítani bináris adatot, nem csak simán url-el.
14

Várom az eredményt

Pepita · 2012. Júl. 4. (Sze), 23.45
Ha összejön és érdemes és van rá időd és ... , akkor én cikk formájában is nagyon szívesen olvasnék róla.

A sprite elnevezést én nem kedvelem, mert még a commodore-os időkben is volt, de mást jelentett. Nyugodtan mondjátok rám, hogy vén f* vagyok, legfeljebb megsértődök. :)

Azért írtam "félve", mert kb. 99%-ra valószínűsítettem, hogy neked eszedbe jutott, csak vmiért nem jó az adott helyzetben.
15

Visszatérve a témához: Kb.

Karvaly84 · 2012. Júl. 5. (Cs), 00.22
Visszatérve a témához:

Kb. hány olyan delikvens lesz az oldalon akinek nincs JavaScript bekapcsolva? Csak azért kérdezem, mert JS-ben fogsz egy preloadert ami megjeleníti az oldalt ha lent vannak a képek. Én elhanyagolhatónak érzem azt a kevés százalékot akinél nincs JS, végülis nem az oldal használhatósága múlik most ezen, vagy igen?
16

Tényleg nem a használhatóság

inf · 2012. Júl. 5. (Cs), 09.19
Tényleg nem a használhatóság múlik rajta, ez inkább egy teszt, hogy javascript nélkül is tudok e használható, és viszonylag jól kinéző oldalt csinálni. És ha az image preload-ot meg tudom oldani js nélkül, akkor miért ne tenném?!

Fogalmam sincs, hogy hányan nem használnak majd js-t a látogatók közül. Majd a jövő megmondja. Én úgy gondoltam, hogy egyetlen elvesztett ügyfél is sok emiatt, ezért csináltam így.
17

IE6-7

T.G · 2012. Júl. 5. (Cs), 09.39
Ám azt meg kell fontolni, hogy míg a JS verzió JS nélkül csupán kényelmi funkció hiánya, addig a data URI IE6-7-ben egyáltalán nem működik. Persze egyszerű megoldani, hogy nekik url-t adsz, de ez már kezd kicsit nyögvenyelős lenni. (ha tényleg szempont az, hogy egy ügyfél is sok)
18

ja hát azért írtam, hogy

inf · 2012. Júl. 5. (Cs), 09.43
ja hát azért írtam, hogy ennél a projektnél biztosan nem, de egyébként mindenképp kipróbálom, mert nem tudtam, hogy ilyet is lehet...