Есть код:
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%;
}
<section class="section-block section-block_bg-change section-block_about" id="about" style="background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-2.jpg') no-repeat; background-size: cover; background-position: 50% 0;">
</section>
Фон у блока должен меняться плавно, но это происходит только после прохождения первого цикла, когда все изображения уже подгрузятся. Подскажите, как сделать так, чтобы изображения менялись плавно с самого начала?