Предварительная загрузка CSS только изображений онлайн урок.


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

# Техника № 1

Загрузите изображение в обычное состояние элемента, только сдвиньте его в исходное положение. Затем переместите положение фона, чтобы отобразить его при наведении.

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

# Техника № 2

Если элемент, о котором идет речь,уже имеет, применяется фоновое изображение, и вам нужноизменитьэто изображение, указанное выше не будет работать. Обычно вы можете найти спрайт здесь (комбинированное фоновое изображение) и просто сдвинуть положение фона. Но если это невозможно, попробуйте это. Примените фоновое изображение к другому элементу страницы, который уже используется, но не имеет фонового изображения.

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

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

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

# Подробнее

Проверьте эту статью вне для некоторых других методов, включая JavaScript.