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

#javascript #html #css

Есть код:



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

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

Ответы

Ответ 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';


Ответ 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;
}



   
   
   
   



Ответ 3

Пока что это решение не очень кроссбраузерное, но зато оно единственное не является
хаком — это использование .

Как и с любым другим элементом , для preload можно использовать атрибут media
и подгружать ресурсы для, например, определенных разрешений экрана.

Smashing magazine article: Preload: What Is It Good For?

Browser support: 53.36% worldwide.