Üks suur põhjus pildi eellaadimise kasutamiseks on see, kui soovite kasutada pilti sündmuse mouseOver või: hover elemendi taustpildiks. Kui rakendate selle taustapildi CSS-is ainult oleku: hover olekuks, laaditakse see pilt alles esimese: hoveri sündmuseni ja seega on selle ala kohal liikuva hiire ja tegelikult kuvatava pildi vahel lühike tüütu viivitus .
Tehnika nr 1
Laadige pilt elemendi tavalisse olekusse, nihutage see ainult taustaasendiga eemale. Seejärel liigutage taustapositsiooni, et seda hõljukil kuvada.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Tehnika nr 2
Kui kõnealusel elemendil on juba taustpilt rakendatud ja peate seda pilti muutma, ei toimi ülaltoodu. Tavaliselt läheksite siin sprite (kombineeritud taustapilt) ja lihtsalt nihutaksite tausta positsiooni. Aga kui see pole võimalik, proovige seda. Rakendage taustpilt teisele leheelemendile, mis on juba kasutusel, kuid millel pole taustpilti.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Idee luua uued leheelemendid, mida selle eellaadimistehnika jaoks kasutada, võivad pähe tulla, näiteks # preload-001, # preload-002, kuid see on pigem vastuolus veebistandardite vaimuga. Seetõttu kasutatakse teie lehel juba olemasolevaid lehe elemente.
Mul oli mõte proovida ja kasutada sama elementi, kasutada pildi laadimiseks ainult: pärast pseduo-klassi, nii et te ei pidanud lootma, et teie lehel on töötamiseks piisavalt kõrvalisi taustavabu pilte, kuid mingil põhjusel ei tahtnud neid korralikult eellaadida.
Veel
Sellest artiklist leiate veel mõned tehnikad, sealhulgas JavaScripti.