Una din sarcinile-cheie ale CSS Sprite este de a optimiza graficul paginii încărcate. Care este scopul acestei optimizări și de ce ar trebui să fie efectuată? Ideea este aceasta: în timp ce pagina nu este optimizată, elementele grafice sunt fișiere separate. Numărul elementelor similare depășește 5 sau 10 piese, prin urmare, pentru a încărca fiecare imagine, browserul face o cerere separată.
Este logic să presupuiți că puteți accelera procesul prin combinarea elementelor grafice. Afișarea parțială este configurată prin CSS. După aceea, browserul va executa o singură cerere de încărcare a imaginilor. Datorită acestui fapt, pagina va fi încărcată de mai multe ori mai repede. Acesta este întregul principiu al optimizării.
În plus, sprite sunt folosite pentru a forma corect efectul schimbării vizuale a elementului în momentul în care utilizatorul îndreaptă cursorul spre el. Absența acestui lucru poate fi văzută atunci când vizitatorul vede un buton intermitent: butonul are două stări - cel inițial și în punctul de orientare, între încărcarea acestor stări în absența unei organizații, există o pauză prea lungă, care provoacă efectul intermitent.
Deci, să aruncăm o privire la exemplele de bază ale spionilor CSS:
Avem o listă de pictograme într-un fișier. Sarcină: ieșiți câteva imagini într-o secvență aleatorie.
Imaginea (css-sprite-01.png) de mai jos este o sprite.
După aplicarea listei de stiluri, pictogramele rămân afișate în ordine aleatorie.
Să aruncăm o privire mai atentă la acest exemplu. Rezoluția imaginii originale a spritelui: 200 * 200 px. Imaginea principală este împărțită în 4 bucăți, fiecare având o rezoluție de 100 * 100 px. Trebuie să creați o listă cu identificatorul css-sprite-ul în document. Elementele din listă sunt numerotate ca 001, 002, 003, etc.
Trimiteți-le prietenilor: