Viens no lielākajiem iemesliem attēlu iepriekšējas ielādes izmantošanai ir tas, ja vēlaties izmantot attēlu elementa fona attēlam vietnē mouseOver vai: hover. Ja CSS lietojat šo fona attēlu tikai stāvoklim: hover, šis attēls netiks ielādēts līdz pirmajam: hover notikumam, un tādējādi starp peli, kas virzās virs šī apgabala, un attēlu, kas faktiski tiek parādīts, būs īsa kaitinoša kavēšanās .
1. tehnika
Ielādējiet attēlu elementa parastajā stāvoklī, pārvietojiet to tikai ar fona stāvokli. Pēc tam pārvietojiet fona pozīciju, lai to parādītu uz kursora.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )2. tehnika
Ja attiecīgajam elementam jau ir piemērots fona attēls un jums ir jāmaina šis attēls, iepriekš minētais nedarbosies. Parasti jūs šeit izmantotu sprite (kombinētu fona attēlu) un vienkārši mainītu fona stāvokli. Bet, ja tas nav iespējams, izmēģiniet to. Lietojiet fona attēlu citam lapas elementam, kas jau tiek izmantots, bet kuram nav fona attēla.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Ideja izveidot jaunus lapu elementus, ko izmantot šai iepriekšējās ielādes tehnikai, var ienirt galvā, piemēram, # preload-001, # preload-002, taču tas drīzāk ir pretrunā ar tīmekļa standartu garu. Tāpēc tiek izmantoti lapas elementi, kas jau pastāv jūsu lapā.
Man bija ideja mēģināt un izmantot to pašu elementu, lai ielādētu attēlu, izmantojiet tikai: pēc pseduo-class, tāpēc jums nevajadzēja paļauties uz to, ka jūsu lapā ir pietiekami daudz svešu attēlu bez fona, lai strādātu, bet kāda iemesla dēļ nevēlējās tos pareizi ielādēt.
Vairāk
Pārbaudiet šo rakstu, lai uzzinātu vairāk par citām metodēm, tostarp JavaScript.