Как предварительно загрузить изображения только с помощью CSS (без JS)?

Question

Как я могу предварительно загружать изображения только с использованием CSS, без использования JavaScript? Это должен быть кросс-браузер.

Я не хочу использовать спрайты CSS. Есть ли другое решение?

Answer 1

Использование CSS-спрайтов .

Answer 2

Вы можете использовать несколько элементов, скрытых с помощью background-position: -1000px -1000px; и дать им background-image для каждого изображения, которое вы хотите предварительно загрузить.

• Вы можете узнать больше здесь

Answer 3

Вы можете попробовать загрузить их все до конечного тега body и не отображать их. Затем, если вы вызовете их позже, они должны быть в кеше, если вы используете точно такой же путь.

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

Вы также можете создать класс с display: none и применить его ко всем изображениям, которые вы также хотите предварительно загрузить.

Это приведет к большему количеству HTTP-запросов, и если вы хотите сократить их, я предлагаю CSS Sprites, если это когда-либо вас касается.