Optimizare web: tehnici inteligente de preîncărcare a imaginilor prin CSS

De multe ori dorim să preîncărcăm anumite imagini (de exemplu, cele folosite la efectele de hover sau în alte zone interactive ale site-ului) înainte ca utilizatorul să interacționeze cu ele, pentru a preveni întârzierile neplăcute la afișare.

O variantă simplă și eficientă, fără a recurge la scripturi JavaScript complexe, constă în încărcarea acestora printr-un element <div> ascuns, stilizat exclusiv prin CSS.

În fișierul de stiluri (CSS) puteți defini o clasă dedicată pentru preîncărcare:

div.loader {
    background: url(images/hover.gif) no-repeat;
    background: url(images/hover2.gif) no-repeat;
    background: url(images/hover3.gif) no-repeat;
    margin-left: -10000px;
}

În structura HTML a paginii, imediat după tagul de deschidere <body>, adăugați următorul element:

<div class="loader"></div>

Prin poziționarea elementului cu mult în afara zonei vizibile a ecranului (margin-left: -10000px;), browserul descarcă fișierele grafice în memoria cache fără ca utilizatorul să le vadă, asigurând o tranziție instantanee la declanșarea efectului de hover.