CSS Предварително зареждане на изображения - CSS-трикове

Една голяма причина да използвате предварително зареждане на изображения е, ако искате да използвате изображение за фоново изображение на елемент в събитие на mouseOver или: hover. Ако приложите само това фоново изображение в CSS за състоянието: hover, това изображение няма да се зареди до първото събитие: hover и по този начин ще има кратко досадно забавяне между мишката, преминаваща през тази област, и изображението, което действително се показва .

Техника # 1

Заредете изображението в нормалното състояние на елемента, само го изместете с позицията на фона. След това преместете позицията на фона, за да я покажете на курсора на мишката.

#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )

Техника # 2

Ако въпросният елемент вече е приложил фоново изображение и трябва да промените това изображение, горното няма да работи. Обикновено бихте избрали спрайт тук (комбиниран фонов образ) и просто да изместите позицията на фона. Но ако това не е възможно, опитайте това. Приложете фоновото изображение към друг елемент на страница, който вече се използва, но няма фоново изображение.

#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )

Идеята за създаване на нови елементи на страницата, които да използвате за тази техника за предварително зареждане, може да се появи в главата ви, като # preload-001, # preload-002, но това е по-скоро в противоречие с духа на уеб стандартите. Следователно използването на елементи на страницата, които вече съществуват на вашата страница.

Имах идеята да се опитам да използвам същия елемент, използвайте само: след псевдо-клас, за да заредите изображението, така че не е нужно да разчитате, че на страницата ви има достатъчно странични изображения без фон, с които да работите, но по каквато и да е причина не искаше да ги зареди предварително правилно.