Spriteiden käsite on ollut jo jonkin aikaa. Se on yksi pelialan yleisimmin käytetyistä tekniikoista animaatioiden näyttämisen nopeuttamiseksi näytöllä. Tässä artikkelissa tarkastelemme erityisesti, miten tämä tekniikka voi auttaa meitä parantamaan verkkosivustojen käyttökokemusta CSS Spritesin avulla seuraavassa järjestyksessä:
- Mikä on Sprite?
- Mikä on CSS Sprite - nopea yleiskatsaus?
- Esimerkki siitä, miten se auttaa verkkokehityksessä?
- CSS-spriteiden käytön edut
- Mitä kehittäjän on tehtävä työskennellessään CSS Spritesin kanssa?
- Kuinka luoda CSS Sprite Sheet?
- Kuinka työskennellä CSS Spritesin kanssa?
- Yritykset, jotka käyttävät CSS Spritesia
Mikä on Sprite?
Sprite on yksittäinen kuva, joka on osa pelin suurempaa kohtausta. Useat spritit yhdistetään sitten suureksi kuvaksi, jota kutsutaan sprite-arkiksi. Kun sprite-arkki on ladattu muistiin, eri spritit renderoidaan nopeasti peräkkäin animaation illuusion tuottamiseksi. Tämä tehdään samanaikaisesti kymmenistä satoihin erilaisiin spritteihin pelin kohtauksen luomiseksi.
Perusajatuksena on, että kuvan lataaminen ja osan näyttäminen on paljon nopeampi kuin tarvitaan, verrattuna useiden kuvien lataamiseen ja näyttämiseen.
Mikä on CSS Sprite: nopea yleiskatsaus?
CSS-sprite on tekniikka, jota web-kehittäjät käyttävät usein verkkosivujen suorituskyvyn optimointiin. Tässä tekniikassa useita pienempiä kuvia, jotka ovat yleensä samankokoisia, yhdistetään yhdeksi suureksi kuvaksi, jota kutsutaan a sprite-arkki tai laattasarja . Tätä sprite-arkkia käytetään sitten näyttämään yksittäisiä elementtejä missä tahansa.
Yleensä elementit, kuten logot, navigointinuolet, painikkeet, sisältyvät sprite-arkkiin, koska ne ovat melkein samankokoisia ja niitä käytetään usein verkkosivulla.
Esimerkki siitä, miten se auttaa verkkokehityksessä?
Yleensä verkkosivuja suunniteltaessa kuvat tallennetaan ja niitä käytetään yksittäisinä tiedostoina. Joten, kun käyttäjä avaa verkkosivun, selaimen on tehtävä HTTP-pyyntö jokaiselle näistä tiedostoista, ladattava ne erikseen ja näytettävä ne. Tämä johtaa korkeampiin sivun latausaikoihin, koska tietyllä verkkosivulla voi olla suuri määrä pienempiä kuvia, kuten painikkeet, kuvakkeet, logot.
CSS-spritit auttavat kehittäjiä yhdistämään nämä usein käytetyt pienet kuvat yhdeksi suureksi kuvaksi. Selaimen on tällöin ladattava vain yksi tiedosto, jota tottuvatNäytä vaadittu osa siirtämällä kuvaa.
CSS-spriteiden käytön edut
CSS-spritien käytössä on kaksi pääetua tavallisiin kuviin nähden:
Nopeampi sivulataus: Parantaa sivun latausaikaa, kun verkkosivulla käytetyt kuvat näkyvät heti, kun arkki on ladattu.
Suurempi suorituskyky ja pienempi resurssien käyttö: Paitsi tämä tekniikka parantaa loppukäyttäjäkokemusta tekemällä sivun latautumisen nopeammaksi,mutta se myös vähentää verkon ruuhkautumista, kun HTTP-pyyntöjä tehdään vähemmän.
mikä on synkronointi jaavassa
Mitä kehittäjällä on tehtävä työskennellessään CSS Spritesin kanssa?
Kun työskentelee yksittäisten kuvien kanssa, kehittäjä voi yksinkertaisesti työskennellä HTML-tagin kanssa ja tyylitä se CSS: ssä tarvittaessa. Mutta työskennellessään CSS Spritesin kanssa kehittäjän on tehtävä kaksi erityistä asiaa:
- Sprite-arkin luominen
Kehittäessään verkkosivua, jos kehittäjä päättää käyttää CSS-sprittejä, hänen on ensin luotava sprite-taulukko yhdistämällä kaikki halutut elementit, kuten painikkeet, logot jne., Ruudukkomaiseksi kuvioksi. Tämä voidaan tehdä millä tahansa kuvankäsittelyohjelmalla, kuten Photoshop tai Gimp. Saatavilla on myös monia verkkotyökaluja, jotka auttavat sinua tekemään sprite-arkin. Näitä työkaluja käsitellään myöhemmin tässä artikkelissa.
- Käytä tiettyä sprite-elementtiä käyttämällä CSS-taustan sijainti omaisuus
Kun sprite-arkki on valmis, kehittäjän on käytettävä CSS-määritteitä päästäksesi arkin eri osiin.
- leveys: Spriteen leveys
- korkeus: Sprite korkeus
- tausta: Viittaus sprite-arkkiin
- Taustan sijainti: Siirtymäarvot (pikseleinä), jotta pääset käsiksi vain sprite-arkin vaadittuun osaan
Kuinka luoda CSS Sprite Sheet?
Voit käyttää mitä tahansa kuvankäsittelyohjelmistoa pienempien kuviesi järjestämiseen ruudukkoon, mutta alla käsitellään kahta helpompaa tapaa:
1. Online Sprite Sheet Creation Tool -työkalu
LINKKI: toptal.com/developers/css/sprite-generator/
Tätä työkalua ei ole vain ilmainen käyttää, vaan se tarjoaa myös vaaditun CSS-koodin, jota voidaan käyttää viitattaessa sprite-arkkiin. Voit myös hämmentää erilaisia ominaisuuksia, kuten pehmuste elementtien välillä ja muuttaa niiden kohdistusta.
2. Sprite-arkin luominen Sprityllä
Jos käytät Gruntia, Solmua tai Gulpia, voit asentaa Sprity-nimisen paketin, jonka avulla voit luoda sprite-arkin useissa muodoissa, kuten PNG, JPG jne.
Ensinnäkin, sinun on asennettava Sprity käyttämällä:
npm asenna sprity -g
Luo sitten sprite-arkki seuraavalla komennolla:
sprity ./output-hakemisto/ ./input-hakemisto/*.png
Kuinka työskennellä CSS Spritesin kanssa?
Tässä esimerkissä käytämme seuraavaa sprite-arkkia:
Kuten yllä olevasta kuvasta näet, kuusi kuvaketta (Instagram, Twitter ja Facebook) on järjestetty ruudukkomaiseksi kuvioksi. Ensimmäisellä rivillä meillä on normaali tila ja toisella rivillä niiden leijutila (kuva, joka tulee näkyviin, kun vietämme hiiren kohdistimen niiden päälle).
Jos teit sprite-levyn edellä käsitellyillä työkaluilla, tiedät jo CSS: ssä vaaditut siirtymät, mutta jos käytit jotain muuta työkalua tai sinulle yksinkertaisesti annettiin jotain sprite-arkkia, älä huoli, keskustelemme menetelmästä, joka auttaa sinua saamaan tarvittavan elementin kompensoinnit.
Katsotaan nyt hyvin yksinkertainen tapa saada vaaditut siirtymät jokaiselle kuudelle kuvakkeelle MS Paintin avulla. Se ei ehkä ole ihanteellinen ratkaisu työskennellä spritien kanssa, mutta koska sillä on ominaisuus, joka antaa hiiren kohdistimen koordinaatit, sitä voidaan käyttää tarvittavien X- ja Y-koordinaattien saamiseen.
Avaa ensin sprite-arkkikuvasi (ruudukko, joka sisältää kaikki pienemmät kuvat) ja tuo hiiren kohdistin tarttuvan sprite-laitteen vasempaan yläkulmaan.
Kun sinulla on spriteesi vasemman yläkulman koordinaatit (vasemman yläkulman Instagram-kuva), voit näyttää tämän nimenomaisen spriteen missä tahansa CSS-koodilla:
tausta: url ('img_sprites.png')
taustan sijainti: 0 0
leveys: 125px
korkeus: 125px
Käytämme leveyttä ja korkeutta 125 pikselinä, koska kuvakkeemme ovat tuon kokoisia. Seuraavan kuvan (Twitter) hakemiseksi samalla rivillä käytämme seuraavaa koodia:
tausta: url ('img_sprites.png')
background-position: -128px 0px
leveys: 125px
korkeus: 125px
Huomaa tausta-sijainti-attribuutti yllä olevassa katkelmassa. (-128px, 0) tarkoittaa, että siirrämme sprite-arkin vasemmalle 128 pikselillä (ottaen huomioon elementtien välinen täyte) ja 0 pikselillä Y-akselilla. Jos pääsisimme Twitter-hover-kuvakkeeseen, taustamääritteemme olisi:
background-position: -128px -128px
Tällä tavoin voimme nyt käyttää sprite-arkin jokaista komponenttia CSS: n avulla. Käydään läpi täydellinen HTML- ja CSS-koodi, miten se tehdään.
Vaihe 1: Vaaditun HTML-koodin kirjoittaminen
Alla olevassa koodissa lisäämme yksinkertaisesti kolme linkkiä. Yhdistämme myös HTML: n tyylitaulukkoon (screen.css).
Vaihe 2: Tarvittavan CSS: n kirjoittaminen. Ensin muotoilemme jaetun kuvakeluokkaamme. Täällä näet, että viittaamme luomaan sprite-arkkiin.
/ * Jaettu kuvake Luokka * /
span. kuvake linkki,
span. kuvake a: vieraili{
näyttö:lohko
teksti-luetelmakohta:-9999px
taustakuva: URL (./ img_sprites.png)
tausta-toisto:ei toista
}
Vaihe 3: Yksittäisten kuvakkeiden saaminen sprite-arkista siirtymien avulla.
/ * Instagram-kuvake * /
span. Instagram linkki,
span. Instagram a: vieraili{
leveys:125 kuvapistettä
korkeus:125 kuvapistettä
taustan sijainti:0 0
}
/ * Twitter-kuvake * /
span.twitter linkki,
span.twitter a: vieraili{
leveys:125 kuvapistettä
korkeus:125 kuvapistettä
taustan sijainti:-128px 0
}
/ * Facebook-kuvake * /
span.facebook linkki,
span.facebook a: vieraili{
leveys:125 kuvapistettä
korkeus:125 kuvapistettä
taustan sijainti:-257px 0
toiminnon ylikuormitus c ++: ssa
}
Vaihe 4: Leijukuvakkeiden saaminen sprite-arkista siirtymien avulla.
span. Instagram a: vie hiiri{taustan sijainti:0 -128px}
span.twitter a: vie hiiri{taustan sijainti:-128px -128px}
span.facebook a: vie hiiri{taustan sijainti:-255px -128px}
Yritykset, jotka käyttävät CSS Spritesia
Monet alan suuret nimet käyttävät CSS Spriteitä verkkosivustojensa reagoivuuden parantamiseen. Yritykset, kuten Google, Facebook, Amazon, käyttävät laajasti tätä menetelmää, koska se auttaa heitä vähentämään HTTP-pyyntöjen määrää istuntoa kohti tietylle käyttäjälle. Tämä on valtava etu, kun otetaan huomioon, että nämä yritykset palvelevat miljoonia asiakkaita milloin tahansa.
Nyt kun sinulla on käsitys siitä, mitä CSS-spritit ovat ja miten työskennellä heidän kanssaan, olet yksi askel lähempänä matkaa oppiaksesi CSS: ää. Spriteiden kaltaiset käsitteet ovat pelinvaihtajia nykypäivän aikana, koska kehittäjille on tullut äärimmäisen tärkeätä poimia jokainen suorituskyky verkkosivulta.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se HTML-kuvat-blogin kommenttiosassa ja palaamme sinuun.