Viena iš svarbiausių priežasčių, kodėl reikia naudoti išankstinį įkėlimą, yra tai, jei norite naudoti vaizdą elemento fone paveikslėlyje įvykyje „mouseOver“ arba: „hover“. Jei CSS fono paveikslėlį pritaikysite tik būsenai „hover“, tas vaizdas nebus įkeltas iki pirmo: „hover“ įvykio, taigi tarp pelės, einančios per tą sritį, ir vaizdo, kuris iš tikrųjų rodomas, bus trumpas erzinantis uždelsimas. .
1 technika
Įkelkite vaizdą į įprastą elemento būseną, tik atitolinkite jį su fono padėtimi. Tada perkelkite fono padėtį, kad ji būtų rodoma užvedus pelę.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )2 technika
Jei atitinkamame elemente jau yra pritaikytas fono paveikslėlis ir jums reikia pakeisti tą vaizdą, aukščiau išvardyti veiksmai neveiks. Paprastai čia eitumėte „sprite“ (kombinuotą fono paveikslėlį) ir tiesiog pakeistumėte fono padėtį. Bet jei tai neįmanoma, pabandykite tai. Taikykite fono paveikslėlį kitam puslapio elementui, kuris jau naudojamas, bet neturi fono paveikslėlio.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Idėja sukurti naujus puslapio elementus, kuriuos galima naudoti šiai išankstinio įkėlimo technikai, gali pasirodyti jums galvoje, pvz., # Preload-001, # preload-002, tačiau tai prieštarauja žiniatinklio standartų dvasiai. Todėl jau naudojamų puslapio elementų naudojimas.
Turėjau idėją pabandyti ir naudoti tą patį elementą, kad įkeltumėte vaizdą, naudokite tik: po „pseduo-class“, todėl jums nereikėjo pasikliauti tuo, kad jūsų puslapyje yra pakankamai pašalinių vaizdų be fono, kad galėtumėte dirbti, bet dėl kokių nors priežasčių nenorėjo jų tinkamai įkelti.
Daugiau
Peržiūrėkite šį straipsnį, norėdami sužinoti daugiau būdų, įskaitant „JavaScript“.
