Браузеры предварительно загружают скрытые фоновые изображения CSS?

Question

Мне сказали, что они это делают, но как только элемент с фоновым изображением CSS становится видимым, загрузка изображения, как будто не кэшируется, занимает время

Должен ли я предварительно загружать их или делать что-то еще, чтобы уменьшить медлительность, когда они показаны?

Answer 1

Решение, которое я использую, которое является распространенным в настоящее время, заключается в использовании спрайтов в качестве фоновых изображений;

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

Вот учебник о том, как их использовать.

И небольшой пример:

ul li {
   width: 50px;
   height: 20px;
   background: url(sprite.png) no-repeat 0px 0px;
}

ul li:hover {
   background-position: 0px -20px;
}

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