Spritu jēdziens pastāv jau kādu laiku. Tas ir viens no spēļu industrijā visbiežāk izmantotajiem paņēmieniem, lai paātrinātu animāciju parādīšanu ekrānā. Šajā rakstā mēs īpaši aplūkosim, kā šī metode var mums palīdzēt uzlabot lietotāju pieredzi tīmekļa vietnēs, izmantojot CSS Sprites šādā secībā:
- Kas ir Sprite?
- Kas ir CSS Sprite - ātrs pārskats?
- Piemērs tam, kā tas palīdz Web izstrādē?
- CSS Sprites izmantošanas priekšrocības
- Kas izstrādātājam jādara, strādājot ar CSS Sprites?
- Kā izveidot CSS Sprite Sheet?
- Kā strādāt ar CSS Sprites?
- Uzņēmumi, kas izmanto CSS Sprites
Kas ir Sprite?
Sprite ir viens attēls, kas ir daļa no lielākas spēles ainas. Pēc tam vairāki spriti tiek apvienoti lielā attēlā, ko sauc par sprite lapu. Kad sprite lapa ir ielādēta atmiņā, tiek ātri atveidoti dažādi spriti, lai radītu animācijas ilūziju. Tas tiek darīts vienlaicīgi desmitiem līdz simtiem dažādu spraitu, lai spēlē izveidotu ainu.
Pamatideja ir tāda, ka ir daudz ātrāk ielādēt attēlu un parādīt tā daļu, kur vien nepieciešams, salīdzinot ar vairāku attēlu ielādi un parādīšanu.
Kas ir CSS Sprite: ātrs pārskats?
CSS sprite ir paņēmiens, ko tīmekļa izstrādātāji bieži izmanto, lai optimizētu tīmekļa lapu veiktspēju. Šajā tehnikā vairāki mazāki attēli, kuriem parasti ir vienādi izmēri, tiek apvienoti vienā lielā attēlā, ko sauc par a sprite lapa vai flīžu komplekts . Pēc tam šo sprite lapu izmanto, lai parādītu atsevišķus elementus visur, kur mums tie nepieciešami.
Parasti tādi elementi kā logotipi, navigācijas bultiņas, pogas tiek iekļauti sprite lapā, jo tiem ir gandrīz vienādi izmēri un tie tiek bieži izmantoti tīmekļa lapā.
Piemērs tam, kā tas palīdz Web izstrādē?
Parasti, izstrādājot tīmekļa lapas, attēli tiek saglabāti un izmantoti kā atsevišķi faili. Tātad, kad lietotājs atver tīmekļa lapu, pārlūkprogrammai ir jāiesniedz HTTP pieprasījums katram no šiem failiem, tie jālejupielādē atsevišķi un jāparāda. Tas noved pie augstākiem lapu ielādes laikiem, jo konkrētā tīmekļa lapā var būt daudz mazāku attēlu, piemēram, pogas, ikonas, logotipi.
CSS sprites palīdz izstrādātājiem apvienot šos bieži lietotos mazos attēlus vienā lielā attēlā. Pēc tam pārlūkprogrammai ir jāielādē tikai viens fails, kas pēc tam tiek izmantotsparādiet nepieciešamo sadaļu, kompensējot attēlu.
CSS Sprites izmantošanas priekšrocības
CSS sprites izmantošanai salīdzinājumā ar parastajiem attēliem ir divas galvenās priekšrocības:
Ātrāka lapas ielāde: Palielina lapas ielādes laiku, jo tīmekļa lapā izmantotie attēli tiek parādīti, tiklīdz lapa ir lejupielādēta.
Lielāka caurlaide un mazāks resursu patēriņš: Ne tikai šī metode uzlabo lietotāja pieredzi, padarot lapu ātrāku ielādi,taču tas arī samazina tīkla pārslodzi, jo tiek veikts mazāks HTTP pieprasījumu skaits.
Kas izstrādātājam jādara, strādājot ar CSS Sprites?
Strādājot ar atsevišķiem attēliem, izstrādātājs var vienkārši strādāt ar HTML tagu un, ja nepieciešams, ieveidojiet to CSS. Bet, strādājot ar CSS Sprites, izstrādātājam ir jādara divas konkrētas lietas:
- Sprite lapas izveide
Izstrādājot tīmekļa lapu, ja izstrādātājs nolemj izmantot CSS sprites, viņam / viņai vispirms ir jāizveido sprite lapa, apvienojot visus vēlamos elementus, piemēram, pogas, logotipus utt. To var izdarīt, izmantojot jebkuru attēlu rediģēšanas programmu, piemēram, Photoshop vai Gimp. Ir pieejami arī daudzi tiešsaistes rīki, kas palīdz izgatavot sprite lapu. Šie rīki ir apskatīti vēlāk šajā rakstā.
- Piekļūstiet noteiktam sprite elementam, izmantojot CSS fona stāvoklis īpašums
Kad sprite lapa ir gatava, izstrādātājam jāizmanto CSS atribūti, lai piekļūtu dažādām lapas daļām.
- platums: Sprite platums
- augstums: Sprite augstums
- fons: Atsauce uz sprite lapu
- Fona stāvoklis: Nobīdes vērtības (pikseļos), lai piekļūtu tikai vajadzīgajai sprite lapas daļai
Kā izveidot CSS Sprite Sheet?
Lai sakārtotu mazākus attēlus režģī, varat izmantot jebkuru attēlu rediģēšanas programmatūru, bet divas vieglākas metodes ir apskatītas tālāk:
1. Tiešsaistes rīks Sprite Sheet Creation
SAITE: toptal.com/developers/css/sprite-generator/
Šis rīks ir ne tikai brīvi lietojams, bet arī nodrošina nepieciešamo CSS kodu, kuru var izmantot, atsaucoties uz sprite lapu. Jūs varat arī mocīties ar dažādām īpašībām, piemēram, polsterējumu starp elementiem un to izlīdzināšanas maiņu.
2. Sprite lapas izveidošana ar Sprity
Ja izmantojat Grunt, Node vai Gulp, varat instalēt paketi ar nosaukumu Sprity, kas palīdzēs jums izveidot sprite lapu dažādos formātos, piemēram, PNG, JPG utt.
Pirmkārt, jums būs jāinstalē Sprity, izmantojot:
npm instalēt sprity -g
Pēc tam, lai izveidotu sprite lapu, izmantojiet šādu komandu:
sprity ./output-directory/ ./input-directory/*.png
sql servera apmācība iesācējiem
Kā strādāt ar CSS Sprites?
Šajā piemērā mēs izmantosim šādu sprite lapu:
Kā redzams iepriekš redzamajā attēlā, sešas ikonas (Instagram, Twitter un Facebook) ir sakārtotas pēc režģa veida. Pirmajā rindā mums ir normāls stāvoklis, bet otrajā rindā - viņu kursors (attēls, kas parādās, kad mēs uz tiem novietojam peles kursoru).
Ja jūs izveidojāt sprite lapu, izmantojot iepriekš apspriestos rīkus, jūs jau zināt CSS prasītos nobīdes, bet, ja jūs izmantojāt kādu citu rīku vai jums vienkārši tika dota kāda sprite lapa, tad neuztraucieties, mēs apspriedīsim metodi, kas palīdzēs jums iegūt nepieciešamā elementa kompensācijas.
Ļauj tagad redzēt ļoti vienkāršu veidu, kā iegūt nepieciešamos nobīdes katrai no sešām ikonām, izmantojot MS Paint. Tas, iespējams, nav ideāls risinājums darbam ar spritēm, bet, tā kā tam ir funkcija, kas nodrošina peles kursora koordinātas, to var izmantot, lai iegūtu nepieciešamās X un Y koordinātas.
Vispirms atveriet sprite lapas attēlu (režģi, kurā ir visi mazākie attēli) un novietojiet peles kursoru sprite augšējā kreisajā stūrī, kuru vēlaties sagrābt.
Kad esat ieguvis sprite augšējā kreisā punkta koordinātas (augšējais kreisais Instagram attēls), varat norādīt šo konkrēto sprite visur, kur nepieciešams, izmantojot CSS kodu:
fons: url ('img_sprites.png')
fona stāvoklis: 0 0
platums: 125 pikseļi
augstums: 125 pikseļi
Mēs izmantojam platumu un augstumu kā 125 pikseļus, jo mūsu ikonas ir šīs dimensijas. Lai ielādētu nākamo attēlu (Twitter) tajā pašā rindā, mēs izmantojam šādu kodu:
fons: url ('img_sprites.png')
background-position: -128px 0px
platums: 125 pikseļi
augstums: 125 pikseļi
Ievērojiet fona pozīcijas atribūtu iepriekšējā fragmentā. (-128px, 0) nozīmē, ka mēs atsveram sprite lapu pa kreisi ar 128 pikseļiem (ņemot vērā polsterējumu starp elementiem) un 0 pikseļiem uz Y ass. Ja mēs piekļūtu čivināt hover ikonai, mūsu fona pozīcijas atribūts būtu:
background-position: -128px -128px
Tādā veidā mēs tagad varam piekļūt katram mūsu sprite lapas komponentam, izmantojot CSS. Apskatīsim pilnu HTML un CSS kodu, kā to izdarīt.
1. darbība: Nepieciešamā HTML koda rakstīšana
Zemāk esošajā kodā mēs vienkārši pievienojam trīs saites. Mēs arī saistīsim mūsu HTML ar stilu lapu (screen.css).
2. darbība: Nepieciešamās CSS rakstīšana. Pirmkārt, mēs veidosim koplietojamo ikonu klasi. Šeit jūs varat redzēt, ka mēs atsaucamies uz mūsu izveidoto sprite lapu.
/ * Dalīta ikona Klase * /
span.ikon a: saite,
span.ikon a: apmeklēja{
displejs:bloķēt
teksta ievilkums:-9999px
Salesforce izstrādātāja apmācība iesācējiem
fona attēls: URL (./ img_sprites.png)
fona atkārtojums:nedrīkst atkārtot
}
3. solis: atsevišķu ikonu iegūšana no sprite lapas, izmantojot nobīdes.
/ * Instagram ikona * /
laidums.instagram a: saite,
laidums.instagram a: apmeklēja{
platums:125 pikseļi
augstums:125 pikseļi
background-position:0 0
}
/ * Twitter ikona * /
span.twitter a: saite,
span.twitter a: apmeklēja{
platums:125 pikseļi
augstums:125 pikseļi
background-position:-128px 0
}
/ * Facebook ikona * /
span.facebook a: saite,
span.facebook a: apmeklēja{
platums:125 pikseļi
augstums:125 pikseļi
background-position:-257px 0
}
4. solis: Lidojuma ikonu iegūšana no sprite lapas, izmantojot nobīdes.
laidums.instagram a: virziet kursoru{background-position:0 -128px}
hashmap ieviešana Java kodā
span.twitter a: virziet kursoru{background-position:-128px -128px}
span.facebook a: virziet kursoru{background-position:-255px -128px}
Uzņēmumi, kas izmanto CSS Sprites
Daudzi nozares lielie vārdi izmanto CSS Sprites, lai uzlabotu viņu vietņu atsaucību. Uzņēmumi, piemēram, Google, Facebook, Amazon, plaši izmanto šo metodi, jo tas viņiem palīdz samazināt HTTP pieprasījumu skaitu vienā sesijā konkrētam lietotājam. Tas ir milzīgs ieguvums, ja ņemam vērā, ka šie uzņēmumi jebkurā brīdī apkalpo miljoniem klientu.
Tagad, kad jūs saprotat, kas ir CSS sprites un kā ar tiem strādāt, jūs esat soli tuvāk CSS apguves ceļam. Šādi jēdzieni kā sprites mūsdienās ir spēles mainītājs, jo izstrādātājiem ir kļuvis ārkārtīgi svarīgi iegūt visu veiktspējas daļu no tīmekļa lapas.
Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar aizmugurējām un priekšējām tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.
Vai mums ir jautājums? Lūdzu, pieminējiet to emuāra “HTML attēli” komentāru sadaļā, un mēs ar jums sazināsimies.