Preîncărcarea imaginilor în CSS este necesară, atunci codul trebuie să afișeze imaginea numai după o anumită acțiune a utilizatorului, și nu imediat, prin încărcarea documentului HTML. De exemplu, imaginea schimbătoare (fundal) a elementului de meniu, când mutați mouse-ul peste el. Problema este că browserul încarcă imagini ascunse numai după acțiunea utilizatorului. Cu cât imaginea încărcată este mai mare și conexiunea mai lentă a clientului cu serverul, cu atât este mai lungă pauza, înainte ca imaginea de fundal să apară. Codul css, care va afișa imagini cu întârziere, este prezentat mai jos. Pentru experiment, utilizați imaginile menu_bg.gif, menu_bg_hover.gif mai multe MB în dimensiune, apoi "efectul" pauzei va fi clar vizibil.
Un exemplu de meniu când, atunci când plasați cursorul peste unul dintre elementele sale, imaginea pentru această acțiune apare cu o întârziere:
Rețineți că, după repornirea paginii, imaginea care apare când mouse-ul se află peste elementul de meniu poate rămâne în memoria cache a browserului, iar efectul de întârziere nu va fi vizibil.
Preload imaginile în CSS:
Pentru a rezolva această problemă, trebuie să adăugați această linie în fișierul CSS:
n7_img_preload # 123;
lățime. 0px;
înălțime. 0px;
afișare. inline;
background-image. URL-ul # 40; http. // obovsem .org .ua / img / menu_bg_hover2.gif # 41; ;
/ * alte imagini pentru preîncărcare * /
# 125;
Și în codul documentului HTML, în orice parte între
. scrieți acest etichetă:Un exemplu de meniu când, când plasați cursorul peste unul dintre elementele sale, apare fără întârziere o imagine pentru această acțiune:
Utilizarea imaginilor combinate
Pentru a scăpa de imaginile preîncărcate utilizând CSS, puteți utiliza opțiunea atunci când o imagine conține 2 imagini. Când plasați mouse-ul peste elementul de meniu, trebuie doar să modificați, folosind CSS, poziția imaginii de fundal.
Un exemplu de meniu când, când plasați cursorul peste unul dintre elementele sale, imaginea pentru această acțiune este stocată într-un fișier cu imaginea principală:
Exemplu de organizare a deplasării fundalului carinei. folosind CSS. este prezentat mai jos:
Codul HTML al linkului către această pagină: