ugrás a tartalomhoz

CSS képek előtöltése

vbence · 2007. Már. 30. (P), 13.27
Előtöltő szkript a hover-re változó hátterek villanása ellen.
 ■
1

CSS "preloader"-re szavazok

sly · 2007. Már. 30. (P), 16.56
Erre a CSS-es 2(vagy több) kép az egyben módszerre már régebben rájöttem magamtól, csak még nem alkalmaztam. A cikkben ajánlott JS technológia nekem nem tetszik, mert CSS-ben lehet oldani ugyan azt amit JS-ben. Ha kettő kép egyben van akkor talán még hatékonyabban is lehet tömöríteni az egész képet.
2

Re

Max Logan · 2007. Már. 30. (P), 17.43
Bár a megoldás tetszik és hasznos is, én inkább az egy képen több kis kép megoldásra szavazok. Éppen a minap csináltam egy olyat, hogy kis ikonokat tettem egy képre, szám szerint 3 ikon vagyis 6 db 16x16 pixeles képből áll össze a 96x16 pixel-es .gif. A CSS-es megoldásnak az előnye még az, hogy ha ki van kapcsolva a JS, akkor is egyből be van cache-elve minden "kép" (no meg, hogy - jelen esetben - 6 kérés helyett csak 1 érkezik a szerverhez).
7

+1 css mátrix

Jano · 2007. Már. 31. (Szo), 10.26
Én is a több kép egybevágására szavazok.
3

JS pluszok

vbence · 2007. Már. 30. (P), 18.58
Mindenképen plusz, hogy JS módszer egy meglévő oldalba is símán becsatolható.

A több kép egyben módszer nekem valahogy nem elég tiszta, és ha ismétlődő képről van szó, már problémák jelentkeznek. Persze a munkamódszeren is sok múlik, ha valaki úgy photoshoppol, hogy egymás alatt vannak a be és kikacpcsolt állapotok, akkor könnyű dolga van ezzel a módszerrel, de másképen akkor nem fog neki kézre esni, ez pedig egy megkötés.
4

elgondolkodtató...

Sulik Szabolcs · 2007. Már. 30. (P), 21.41
... hogy valóban szükség van-e erre.

Szóval megkötés? Szerintem a felhasználót kötöd így a js-hez azzal, hogy a fejlesztőt "felszabadítod" a képszerkesztés "nyomorából".

Amúgy hamár PS (angol verzió): van két képed (egy sima és egy a hover-hez). Megnyitod az egyiket, Ctrl+Alt+C - rajzvászon átméretezése, majd másik kép megnyitása, mindent kijelöl és átmásol az előző alsó részébe, majd egy Ctrl+Shift+S - mentés másként. Ennyi. Ez kb 30 másodperc. Vajon hány olyan kép van egy oldalon, melynél erre szükséges lehet? (nem hiszem, hogy 10-20-nál több átlagban (de lehet, hogy sokat mondok)). És ezt nem kell többször megcsinálnod, a képek letudva.

A css-t pedig ígyis-úgyis meg kell irnod, ez nem lehet indok.

Tök jó dolog a js, meg az is, hogy programozhatunk benne, de nem biztos, hogy erre való.
5

kinek a pap

vbence · 2007. Már. 31. (Szo), 01.00
Én is amellett vagyok, hogy maradjon a JS annál, amire való, és ha lehet még lynxben is élvezhető legyen a tartalom. Amiről most beszélünk az viszont egy cicoma a felhasználónak. Ha mondjuk a JS nem működik, nem válik használhatatlanná az oldal. Az pedig, aki JS nékül böngészik hozzá szokott, hogy a világ mostoha vele (vagyis az lesz a legkisebb gondja, hogy vilannak a képek).

Én sokkal rövidebbnek gondoltam a PS pluszmunkát :) Én azt mondom sok a 20 másodperc, főleg ha a 0 másodpercel hasolítjuk össze, és főleg ha módosításonként újra el kell játszani. (Nálam legalább is a amikor harmadszorra végzek el egy ehhez hasonló dolgot, és még nem tudom, hogy hányszor mondja a megrendelő, "Mi lenne ha kisebb és piros lenne", akkor jön a "Mentem volna inkább péknek" szindróma).

De mint mondtam munkamódszer és szemlélet kérdése. Egy button-over.jpg x év múlva is egyértelmű lesz, amég egy background-position: 75%-ról nem biztos hogy beugrik ugyanez. Ha gépközelibben gondolkodsz és nem tartod idegennek, lelked rajta.

Egy ilyen JS patch-csel a CSS fájlod a lehető legszimplábban tartható, egyszerűen nem kell gondod legyen a problémára.
6

nekem a papné

gex · 2007. Már. 31. (Szo), 10.04
Nálam legalább is a amikor harmadszorra végzek el egy ehhez hasonló dolgot, és még nem tudom, hogy hányszor mondja a megrendelő, "Mi lenne ha kisebb és piros lenne"

ennek semmi köze ahhoz, hogy js-t vagy css-t használsz, így is úgy is újra el kell készítened a képeket. ha nekem eleve olyan a psd-m, amiben szépen egymás alatt vannak a gomb különböző állásai, akkor másolgatni sem kell és én egyből meg tudom nyomni a mentés webre gombot, neked meg kétszer kell ezt eljátszanod. :]

a te megoldásodnak szerintem akkor van értelme, ha egy villogó oldalt kell kicsit feljavítani (pl az apple-ét gyorsan, el is küldhetnédnekik, hátha ;]), de ha nulláról kezdesz mindent, akkor én is inkább a css-beli megoldásra szavazok.

a button-over.jpg-ről meg az a véleményem, hogy most azért egyértelmű, mert sok éven keresztül ezt használtuk, egyszerűen így alakult ki. de 10 évvel ezelőtt nem hiszem, hogy evidens volt mindenkinek. úgy gondolom, ha szépen áttérünk a css-es megoldásra, akkor x év múlva ez is egyértelmű lesz.
8

Hát rendben...

vbence · 2007. Már. 31. (Szo), 11.56
nem akarok eladni halálpálcákat, megyek és átgondolom az életem :)
9

egyszerű megoldás, csak css

lui77 · 2009. Júl. 22. (Sze), 08.06
talán a legegyszerűbb megoldás, ha a <BODY> után, egyből a kód elejére teszel egy div-et, abba betöltöd az összes képet, majd adsz neki egy display:none stílust, hogy ez a div ne jelenjen meg az oldalon, és a helyet se foglalja. Nekem műxik:

<BODY>
<div style="display:none;"> <!-- képek előtöltése --> 
<img src="menu1.jpg" /><img src="menu1_hover.jpg" />
<img src="menu2.jpg" /><img src="menu2_hover.jpg" />
<img src="menu3.jpg" /><img src="menu3_hover.jpg" />
.
.
.
stb...
</div>
persze lehet azt is, hogy írsz egy php szkripet ebbe a dobozba, hogy képek egy csoportját betöltse, vagy egy könyvtárból az összes képet, és az kirakja. De a lényeg, hogy a képek html oldalon legyenek kirakva, és a display:none stílus érték!
10

Ügyes

Joó Ádám · 2009. Júl. 26. (V), 18.39
A kereső, a vak látogató, a szöveges böngésző, meg bárki, aki nem használ stíluslapot, meg menjen a fenébe, mi?
11

igen

lui77 · 2009. Júl. 30. (Cs), 08.43
igen, sőt az is, aki nem használ ámítógépet, meg bőr van a nyakát, meg néha balra néz...

Ha jól tudom a téma a "CSS képek előtöltése", és ehhez adtam tippet; nem pedig az a téma, hogy hogy tud fekvőtámaszt csinálni az, akinek nincs keze se...

De nagy örömmel meghallgatom a Te építő jellegű javaslatodat is a témával kapcsolatban, Mester....

(mindenesetre ez szerintem jobb megoldás, mint a javascriptes, mert azt tényleg nem mindenki engedélyezi)

üdv.
L.
12

Személyeskedés

yaanno · 2009. Júl. 30. (Cs), 10.11
Mielőtt nekitámadnál valakinek, aki arra próbált rámutatni, hogy a megoldásod finoman szólva is helytelen, gondolkozz.

Helytelen, mert:

1. A probléma megoldása helyett, megkerülöd azt: létrehozol egy rejtett konténert, amibe belerakod a képeket - ezt a böngészőnek pontosan ugyanúgy kell letöltenie / betöltenie, mint ha az eredeti helyen tenné.

2. Bizony mondom néked, hogy ha cool fejlesztő akarsz lenni, akkor ne tegyél extra elemeket egy oldalba, csak mert az "kényelmes". Előbb-utóbb szólni fognak, hogy kezdd el optimalizálni a kódot, és ez a "megoldás" éppen nem optimális. Az állásod is múlhat ilyesmiken.

3. A használhatóság és hozzáférhetőség nem valami bónusz, amit for fun vagy jóarcságból teszel a webalkamazásba, hanem alapvető dolog. Ha ezt ignorálod, ignorálni fognak mint fejlesztőt.

Kérlek, hogy erre ne válaszolj azzal, hogy "de hát ő kezdte", az olyan óvodás dolog. Senki sem halt bele még abba, hogy tévedett, vagy butaságot mondott, inkább próbálj tanulni belőle.
13

ok

lui77 · 2009. Aug. 13. (Cs), 13.15
igen, igazad van, lehet, hogy hirtelen felindulásból elkövetett beszólást hajtottam végre. :-)

de az optimalizálás miatt tényleg érdekelne egy jó megoldás erre a témára...

(lehet, hogy félreérthető voltam, de nem az egész oldal összes képeinek előtöltésére gondoltam, csak a menü(háttér)képek letöltésére, hogy ne villogjon. lsd. fenn.)

üdv.

L.
14

css sprite

gex · 2009. Aug. 13. (Cs), 13.23
a menü(háttér)képek letöltésére, hogy ne villogjon
google: css sprite