Jedným z veľkých dôvodov na použitie predbežného načítania obrázkov je, ak chcete použiť obrázok na obrázok na pozadí prvku v udalosti mouseOver alebo: hover. Ak použijete tento obrázok na pozadí iba v CSS pre stav: hover, tento obrázok sa načíta až po prvej udalosti: hover, a teda medzi myšou prechádzajúcou cez túto oblasť a skutočne zobrazeným obrázkom bude krátke nepríjemné oneskorenie. .
Technika č. 1
Načítajte obrázok do normálneho stavu prvku, iba ho posuňte preč s pozíciou na pozadí. Potom posuňte pozíciu na pozadí, aby sa zobrazila pri umiestnení kurzora myši.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Technika č. 2
Ak je v príslušnom prvku už použitý obrázok na pozadí a musíte tento obrázok zmeniť, vyššie uvedené nebude fungovať. Typicky by ste tu šli po sprite (kombinovaný obrázok na pozadí) a iba posunuli pozíciu na pozadí. Ak to však nie je možné, vyskúšajte toto. Použite obrázok na pozadí na iný prvok stránky, ktorý sa už používa, ale nemá obrázok na pozadí.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Nápad vytvoriť nové prvky stránky, ktoré sa majú použiť pre túto techniku predbežného načítania, vám môže napadnúť v hlave, napríklad # preload-001, # preload-002, ale je to skôr v rozpore s webovými štandardmi. Preto sa používa použitie prvkov stránky, ktoré už na vašej stránke existujú.
Napadlo mi pokúsiť sa použiť ten istý prvok, na načítanie obrázka použiť iba triedu: after pseduo-class, takže ste sa nemuseli spoliehať na to, že na vašej stránke bude dostatok cudzích obrázkov bez pozadia, s ktorými môžete pracovať, ale z akýchkoľvek dôvodov ich nechcel správne predpísať.
Viac
V tomto článku nájdete ďalšie techniky vrátane JavaScriptu.