3

Есть код:

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

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

2
  • Пробовали склеить фон в спрайт и просто менять позицию?
    – Илья
    10 июл 2017 в 12:23
  • не подходит, блок адаптивный
    – dima_bur
    10 июл 2017 в 12:28

3 ответа 3

3

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

1

Пока что это решение не очень кроссбраузерное, но зато оно единственное не является хаком — это использование <link rel="preload" href="images/image.jpg" as="image">.

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

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

Browser support: 53.36% worldwide.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.