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

Question

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

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

Answer 1

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

• Вы можете прочитать больше здесь

Answer 2

Используйте CSS Sprites .

Answer 3

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

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

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

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