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

235

11 июля 2017, 19:06

Есть код:

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>

https://codepen.io/dima_bur/pen/mwQrNX

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

Answer 1

Попробуйте заранее прогрузить Ваши изображения на 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';

Answer 2

Добавьте все эти изображения в скрытый блок - тогда они будут грузиться вместе с самой странцией.

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: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-1.jpg') no-repeat;", 
    "background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-4.jpg') no-repeat;", 
    "background: url('http://res.cloudinary.com/dk0qq/image/upload/v1499688477/Chahning-bg/bg-3.jpg') no-repeat;" 
  ]; 
  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%; 
  background-size: cover!important;  
  background-position: 50% 0!important; 
} 
 
.imgprldr { 
  position:absolute; 
  left:-9999px; 
  top:-9999px; 
  opacity:0px; 
  visibility:hidden; 
  width:0px; 
  height:0px; 
  overflow:hidden; 
}

<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;"> 
</section> 
<div class="imgprldr"> 
   <img src="http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-1.jpg" /> 
   <img src="http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-2.jpg" /> 
   <img src="http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-3.jpg" /> 
   <img src="http://res.cloudinary.com/dk0qq/image/upload/v1499688478/Chahning-bg/bg-4.jpg" /> 
</div>