Предварительная загрузка изображений только для 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, но это скорее противоречит духу веб-стандартов. Следовательно, использование элементов страницы, которые уже существуют на вашей странице.

У меня возникла идея попробовать и использовать тот же элемент, только использовать псевдо-класс: after для загрузки изображения, поэтому вам не нужно полагаться на то, что на вашей странице достаточно посторонних изображений без фона для работы, но по какой-то причине не хотел предварительно загружать их должным образом.