Белая вспышка при изменении нескольких фоновых изображений css через jQuery

Question

У меня есть страница с несколькими css-изображениями. Каждый раз, когда вы нажимаете точку (первые три точки работают внизу), новое изображение приходит через jQuery. К сожалению, есть белая вспышка, пока браузер не кэширует изображения.

Есть ли обходной путь для предварительной загрузки трех фоновых изображений?

Answer 1

new Image().src = "url"; 

это будет кэшировать изображения. Если у вас есть куча адресов для загрузки:

[ 
    "images/sunset.jpg", 
    "images/greece.jpg", 
    "images/adventure.jpg" 
].forEach(function(url){ 
    new Image().src = url; 
}); 

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

Answer 2

$('<img/>', {src: your_source}); // for each image 

Answer 3

вы можете предварительно загрузить изображения, используя сам js.

пример:

var img1 = new Image(); 
img1.src = "img1 path"; 

var img2 = new Image(); 
img2.src = "img2 path"; 

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