X

Aleproste na FaceBook'u

Reklama.

[CSS] [HTML] Jak wczytać grafikę na podmianę np. dla pseudo klasy hover :: bez JavaScriptu

Jak wczytać do pamięci przeglądarki zdjęcia, które będą wykorzystywane później, np. w zdarzeniach hover?

Jeśli wykorzystujemy technikę podmiany grafiki przez zdarzenia typu hover lub onmouseover itp. to nawet jeśli dysponujemy szybkim łączem może się zdarzyć, że przez kilka sekund elementy, dla których wystąpi zdarzenie hover lub onmouseover zostaną pozbawione grafiki. Dzieje się tak dlatego, że dopiero w chwili wystąpienia zdarzenia, przeglądarka pobiera grafikę na podmianę.

Możemy jednak w bardzo prosty sposób uniknąć takiej sytuacji, wymuszając na przeglądarce pobranie także tych grafik, które na początku są na stronie niewidoczne. Taka technika może być przydatna np. dla graficznych przycisków menu, które zmieniają swój wygląd po najechaniu kursorem myszki lub po kliknięciu.

Jak to zrobić?

W arkuszu CSS definiujemy następujący (przykładowy) kontener.

#grafika_na_potem {
       background: url(grafika.jpg);
       display: none;
}

Na początki kodu HTML wstawiamy natomiast następujący kontener:

<div id='grafika_na_potem'> </div>

Kontener #grafika_na_potem jest niewidoczny {display: none;}, jednak powoduje on wczytanie grafiki do pamięci przeglądarki.

W wielu przypadkach taki zabieg jest wystarczający, gdyż zanim zdążymy wykonać na stronie jakąś akcję, grafika zostanie już pobrana.

starr

opublikowane 02-03-2010165785 powrót

© aleproste.pl v.10 Projekt i realizacja projekt.etvn.pl & aleproste.pl