Yksi suuri syy kuvien esilatauksen käyttämiseen on, jos haluat käyttää kuvaa elementin taustakuvaksi mouseOver- tai: hover-tapahtumassa. Jos sovellat kyseistä taustakuvaa CSS: ssä vain: hover-tilaan, kyseinen kuva latautuu vasta ensimmäiseen: hover -tapahtumaan, joten alueen yli menevän hiiren ja tosiasiallisesti näkyvän kuvan välillä on lyhyt ärsyttävä viive. .
Tekniikka # 1
Lataa kuva elementin normaaliin tilaan, siirrä se pois vain taustan sijainnilla. Siirrä sitten taustakohtaa näyttääksesi sen hiirellä.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Tekniikka # 2
Jos kyseisessä elementissä on jo taustakuva käytössä ja sinun on muutettava sitä, yllä oleva ei toimi. Tyypillisesti etsit spriteä täällä (yhdistetty taustakuva) ja vain siirrät taustakohtaa. Mutta jos se ei ole mahdollista, kokeile tätä. Lisää taustakuva toiseen jo käytössä olevaan sivuelementtiin, mutta sillä ei ole taustakuvaa.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Ajatus luoda uusia sivuelementtejä käytettäväksi tälle esilataustekniikalle saattaa tulla päänne, kuten # preload-001, # preload-002, mutta se on pikemminkin verkkostandardien hengen vastaista. Siksi sivuillasi jo olevia sivuelementtejä käytetään.
Minulla oli idea yrittää käyttää samaa elementtiä, käyttää vain: pseduo-luokan jälkeen kuvan lataamiseen, joten sinun ei tarvinnut luottaa siihen, että sivullasi on tarpeeksi ylimääräisiä taustattomia kuvia, jotta voit työskennellä, mutta jostain syystä ei halunnut ladata niitä oikein.
Lisää
Katso tästä artikkelista lisää tekniikoita, mukaan lukien JavaScript.