Как заранее подгрузить бэкграунды?

Есть код:
function changingBg(delay = 3000) { let changingBgBlock = document.querySelector('.section-block_bg-change'); let i = 0; let backgrounds = [ "background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-2.jpg') no-repeat; background-size: cover; background-position: 50% 0;", "background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-1.jpg') no-repeat; background-size: cover; background-position: 50% 0;", "background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-4.jpg') no-repeat; background-size: cover; background-position: 50% 0;", "background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688477/Chahning-bg/bg-3.jpg') no-repeat; background-size: cover; background-position: 50% 0;" ]; setInterval(function() { if (i == backgrounds.length - 1) { i = 0; } console.log(backgrounds[i]); changingBgBlock.style.cssText = backgrounds[i]; i++; }, delay) } changingBg(); html, body { width: 100%; height: 100%; min-height: 100%; } .section-block_bg-change { -webkit-transition-duration: 1s; transition-duration: 1s; width: 100%; min-height: 100%; }

https://codepen.io/dima_bur/pen/mwQrNX
Фон у блока должен меняться плавно, но это происходит только после прохождения первого цикла, когда все изображения уже подгрузятся. Подскажите, как сделать так, чтобы изображения менялись плавно с самого начала?

Ответ

Попробуйте заранее прогрузить Ваши изображения на JS (выполните этот код в начале страницы):
new Image().src = 'http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-2.jpg'; new Image().src = 'http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-1.jpg'; new Image().src = 'http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-4.jpg'; new Image().src = 'http://res.cloudinary.com/dk0qq/image/upload/v1499688477/Chahning-bg/bg-3.jpg';