Велики разлог за коришћење унапред учитавања слика је ако желите да користите слику за позадинску слику елемента на догађају моусеОвер или: ховер. Ако ту слику у позадини примените само у ЦСС-у за: ховер стање, та слика се неће учитати до првог: ховер догађаја и због тога ће доћи до кратког досадног кашњења између преласка миша преко те области и слике која се стварно приказује .
Техника # 1
Учитајте слику у нормално стање елемента, само га померите са положајем позадине. Затим померите положај позадине да бисте га приказали при преласку.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Техника # 2
Ако је за предметни елемент већ примењена позадинска слика и морате да промените ту слику, горе наведено неће функционисати. Обично бисте овде користили сприте (комбиновану позадинску слику) и само померали положај позадине. Али ако то није могуће, покушајте ово. Примените позадинску слику на други елемент странице који је већ у употреби, али нема позадинску слику.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Идеја о стварању нових елемената странице које ћете користити за ову технику претходног учитавања може вам се појавити у глави, попут # прелоад-001, # прелоад-002, али то је прилично против духа веб стандарда. Отуда и употреба елемената странице који већ постоје на вашој страници.
Имао сам идеју да покушам да користим исти елемент, само да користим: након пседуо-класе за учитавање слике, тако да нисте морали да се ослањате на то да на вашој страници има довољно страних слика без позадине за рад, али из било ког разлога није желео да их унапред правилно учита.
Више
Погледајте овај чланак за још неких техника, укључујући ЈаваСцрипт.