A fröccsök fogalma már egy ideje létezik. A játékipar egyik leggyakrabban alkalmazott technikája, amely felgyorsítja az animációk képernyőn való megjelenítését. Ebben a cikkben külön megvizsgáljuk, hogyan segíthet ez a technika a weboldalak felhasználói élményének javításában a CSS Sprites segítségével a következő sorrendben:
- Mi az a Sprite?
- Mi a CSS Sprite - gyors áttekintés?
- Példa arra, hogyan segít a webfejlesztésben?
- A CSS Sprites használatának előnyei
- Mit kell tennie egy fejlesztőnek, amikor a CSS Sprites programmal dolgozik?
- Hogyan készítsünk CSS Sprite Sheet-et?
- Hogyan kell működni a CSS Sprites programmal?
- CSS Sprites-t használó vállalatok
Mi az a Sprite?
A sprite egyetlen kép, amely egy játék nagyobb jelenetének része. Ezután több sprite-t egy nagy képpé egyesítenek, amelyet sprite-lapnak hívnak. Miután egy sprite lapot betöltöttek a memóriába, a különböző sprite-eket gyorsan egymás után renderelik, hogy az animáció illúzióját keltsék. Ez egyidejűleg történik tíz-száz különféle sprite-ek létrehozása érdekében egy jelenetet a játékban.
Az alapötlet az, hogy sokkal gyorsabb képet betölteni és annak egy részét bárhol megjeleníteni, ahol szükséges, összehasonlítva több kép betöltésével és megjelenítésével.
Mi az a CSS Sprite: Gyors áttekintés?
A CSS sprite egy olyan technika, amelyet a webfejlesztők gyakran használnak a weboldalak teljesítményének optimalizálására. Ebben a technikában több kisebb, általában ugyanolyan méretű képet kombinálnak egyetlen nagy képpé, amelyet a-nak hívnak sprite lap vagy csempe készlet . Ezt a sprite lapot használjuk az egyes elemek megjelenítésére, ahol csak szükségünk van rájuk.
mit csinál a trim a java-ban
Általában az olyan elemek, mint a logók, a navigációs nyilak, a gombok, szerepelnek a sprite lapban, mivel szinte azonos méretűek és gyakran használják egy weboldalon.
Példa arra, hogyan segít a webfejlesztésben?
Általában a weboldalak tervezése során a képeket egyedi fájlként tárolják és használják. Tehát, amikor a felhasználó megnyit egy weboldalt, a böngészőnek minden egyes fájlhoz HTTP-kérést kell küldenie, külön le kell töltenie és meg kell jelenítenie. Ez magasabb oldalbetöltési időkhöz vezet, mivel egy adott weboldal sok kisebb képpel rendelkezik, mint például gombok, ikonok, logók.
A CSS-írások segítik a fejlesztőket, hogy ezeket a gyakran használt kis képeket egyetlen nagy képpé egyesítsék. A böngészőnek csak egy fájlt kell letöltenie, amelyet aztán megszokottjelenítse meg a kívánt részt a kép eltolásával.
A CSS Sprites használatának előnyei
A CSS-írások használatának két fő előnye van a normál képekkel szemben:
Gyorsabb oldalbetöltés: Növeli az oldal betöltési idejét, mivel a weboldalon használt képek megjelennek, amint a lap letöltésre kerül.
Nagyobb áteresztőképesség és alacsonyabb erőforrás-felhasználás: Nem csak ez a technika javítja a végfelhasználói élményt azáltal, hogy gyorsabbá teszi az oldal betöltését,de csökkenti a hálózati torlódásokat is, mivel kevesebb HTTP kérés érkezik.
Mit kell tennie egy fejlesztőnek, amikor a CSS Sprites programmal dolgozik?
Ha egyedi képekkel dolgozik, a fejlesztő egyszerűen csak HTML tag-kel dolgozhat és szükség esetén CSS-ben formázza. De amikor a CSS Sprites programmal dolgozik, a fejlesztőnek két konkrét dolgot kell tennie:
- Sprite lap létrehozása
Weboldal fejlesztése közben, ha a fejlesztő úgy dönt, hogy CSS-spriteket használ, először létre kell hoznia a sprite-lapot úgy, hogy az összes kívánt elemet, például gombokat, logókat stb. Rácsszerű mintába egyesíti. Ez bármilyen képszerkesztő programmal megtehető, például Photoshop vagy Gimp. Számos online eszköz is rendelkezésre áll, amelyek segítenek a sprite lap elkészítésében. Ezeket az eszközöket a cikk később tárgyalja.
- A sprite egy adott eleméhez a CSS háttérpozíció ingatlan
Miután elkészült a sprite lap, a fejlesztőnek CSS attribútumokat kell használnia a lap különböző részeihez való hozzáféréshez.
- szélesség: A sprite szélessége
- magasság: A sprite magassága
- háttér: Hivatkozás a sprite lapra
- Háttér-helyzet: Eltolásértékek (pixelben) a sprite lap csak szükséges részének eléréséhez
Hogyan készítsünk CSS Sprite Sheet-et?
Bármely képszerkesztő szoftvert használhat a kisebb képek rácsba rendezéséhez, de az alábbiakban két egyszerűbb módszert tárgyalunk:
1. Online Sprite Sheet Creation Tool
LINK: toptal.com/developers/css/sprite-generator/
Ez az eszköz nemcsak ingyenesen használható, hanem megadja a szükséges CSS-kódot is, amelyet a sprite lap hivatkozása során lehet használni. Különböző tulajdonságokkal, például az elemek közötti párnázással és azok igazításának megváltoztatásával lehet babrálni.
2. Sprite lap létrehozása Sprity-vel
Ha a Grunt, a Node vagy a Gulp szoftvert használja, telepíthet egy Sprity nevű csomagot, amely segít egy sprite lap létrehozásában különféle formátumokban, például PNG, JPG stb.
Először telepítenie kell a Sprity-t a következő módon:
npm install sprity -g
Ezután a sprite lap előállításához használja a következő parancsot:
sprity ./output-directory/ ./input-directory/*.png
Hogyan kell működni a CSS Sprites programmal?
Ebben a példában a következő sprite lapot fogjuk használni:
Amint a fenti képen látható, hat ikon (Instagram, Twitter és Facebook) rácsszerű mintázatban van elrendezve. Az első sorban normális állapotunk van, a másodikban pedig a lebegésük állapota (az a kép, amely akkor jelenik meg, ha az egérmutatót rájuk mozgatjuk).
Ha a sprite lapot a fent tárgyalt eszközökkel készítette, akkor már ismeri a CSS-ben megkövetelt eltolódásokat, de ha valamilyen más eszközt használt, vagy egyszerűen kapott valami sprite lapot, akkor ne aggódjon, egy olyan módszert fogunk megvitatni, amely segít a szükséges elem ellentételezésében.
Lássuk most egy nagyon egyszerű módszert arra, hogy az MS Paint használatával megszerezzük a szükséges hatást mind a hat ikonhoz. Lehet, hogy nem ideális megoldás a sprite-ekkel való munkavégzéshez, de mivel rendelkezik azzal a funkcióval, amely megadja az egér kurzorának koordinátáit, felhasználható a szükséges X és Y koordináták megszerzésére.
Először nyissa meg a sprite lap képét (az összes kisebb képet tartalmazó rácsot), és vigye az egérmutatót a sprite bal felső sarkába, amelyet meg akar ragadni.
Miután megvan a sprite bal felső pontjának koordinátái (bal felső Instagram kép), a CSS kód segítségével bárhol megjelenítheti ezt a speciális sprite-t:
háttér: url ('img_sprites.png')
háttér-helyzet: 0 0
szélesség: 125px
magasság: 125px
A szélességet és magasságot 125 pixelként használjuk, mivel az ikonjaink ilyen méretűek. A következő kép (Twitter) lekéréséhez ugyanabban a sorban a következő kódot használjuk:
háttér: url ('img_sprites.png')
háttér-helyzet: -128px 0px
szélesség: 125px
magasság: 125px
Vegye figyelembe a háttér-pozíció attribútumot a fenti részletben. (-128px, 0) azt jelenti, hogy a sprite lapunkat balra fordítjuk 128 pixellel (figyelembe véve az elemek közötti kitöltést) és 0 pixellel az Y-tengelyen. Ha hozzáférnénk a twitter lebegő ikonhoz, akkor a háttér-pozíció attribútumunk a következő lenne:
háttér-helyzet: -128px -128px
Ily módon a CSS segítségével hozzáférhetünk a sprite lapunk minden egyes eleméhez. Menjünk át egy teljes HTML és CSS kódon, hogyan kell ezt megtenni.
1. lépés: A szükséges HTML kód megírása
Az alábbi kódban egyszerűen három linket adunk hozzá. Ezenkívül összekapcsoljuk a HTML-t a stíluslappal (screen.css).
2. lépés: A szükséges CSS megírása. Először meg fogjuk alakítani a megosztott ikon osztályunkat. Itt láthatja, hogy hivatkozunk az általunk létrehozott sprite lapra.
/ * Megosztott ikon osztály * /
span.ikon egy link,
span.ikon a: meglátogatott{
kijelző:Blokk
szöveg-behúzás:-9999px
háttérkép: URL (./ img_sprites.png)
háttérismétlés:nem ismételni
}
3. lépés: Az egyes ikonok megszerzése a sprite lapról az eltolások segítségével.
/ * Instagram ikon * /
span.instagram egy link,
span.instagram a: meglátogatott{
szélesség:125px
magasság:125px
háttér-helyzet:0 0
}
/ * Twitter ikon * /
span.twitter egy link,
span.twitter a: meglátogatott{
szélesség:125px
magasság:125px
háttér-helyzet:-128px 0
}
/ * Facebook ikon * /
span.facebook egy link,
span.facebook a: meglátogatott{
szélesség:125px
magasság:125px
háttér-helyzet:-257px 0
c ++ egy tömb rendezése
}
4. lépés: A lebegő ikonok lekérése a sprite lapról az eltolások segítségével.
span.instagram a: lebeg{háttér-helyzet:0 -128px}
span.twitter a: lebeg{háttér-helyzet:-128px -128px}
span.facebook a: lebeg{háttér-helyzet:-255px -128px}
CSS Sprites-t használó vállalatok
Az iparban sok nagy név használja a CSS Sprite programokat, hogy javítsa a weboldalak reakciókészségét. Az olyan vállalatok, mint a Google, a Facebook, az Amazon széles körben használják ezt a módszert, mivel ez segít nekik csökkenteni egy HTTP-kérés számát munkamenetenként egy adott felhasználó számára. Ez óriási előny, ha figyelembe vesszük, hogy ezek a vállalatok az ügyfelek millióit szolgálják ki egy adott pillanatban.
Most, hogy ismeri a CSS írásait és a velük való együttműködést, egy lépéssel közelebb kerül a CSS megtanulásához. Az olyan fogalmak, mint a sprite, napjainkban játék-váltók, mivel a fejlesztők számára rendkívül fontossá vált, hogy a teljesítmény minden kis részét kivonják egy weboldalról.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a „HTML Images” blog megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.