Un motiv important pentru a utiliza preîncărcarea imaginii este dacă doriți să utilizați o imagine pentru imaginea de fundal a unui element de pe mouse-ul sau evenimentul hover. Dacă aplicați acea imagine de fundal în CSS doar pentru starea: hover, imaginea respectivă nu se va încărca până la primul eveniment: hover și astfel va exista o scurtă întârziere enervantă între mouse-ul care trece peste acea zonă și imaginea care se afișează efectiv .
Tehnica nr. 1
Încărcați imaginea în starea obișnuită a elementului, deplasați-o doar cu poziția de fundal. Apoi mutați poziția de fundal pentru a o afișa în cursorul mouse-ului.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Tehnica # 2
Dacă elementul în cauză are deja aplicată o imagine de fundal și trebuie să schimbați imaginea respectivă, cele de mai sus nu vor funcționa. De obicei, ați alege un sprite aici (o imagine de fundal combinată) și ați schimba doar poziția de fundal. Dar dacă acest lucru nu este posibil, încercați acest lucru. Aplicați imaginea de fundal unui alt element de pagină care este deja utilizat, dar care nu are o imagine de fundal.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Ideea de a crea noi elemente de pagină pe care să le folosiți pentru această tehnică de preîncărcare poate să vă apară în cap, cum ar fi # preload-001, # preload-002, dar asta este mai degrabă împotriva spiritului standardelor web. Prin urmare, utilizarea elementelor de pagină care există deja pe pagina dvs.
Am avut ideea să încerc și să folosesc același element, să folosesc doar: după pseduo-class pentru a încărca imaginea, deci nu a trebuit să te bazezi pe faptul că există suficiente imagini străine fără fundal pe pagina ta pentru a lucra, dar din orice motiv nu a vrut să le preîncărcați corect.
Mai mult
Consultați acest articol pentru mai multe tehnici, inclusiv JavaScript.