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
  • Пробовали склеить фон в спрайт и просто менять позицию?
    – Илья
    Commented 10 июл. 2017 в 12:23
  • не подходит, блок адаптивный
    – dima_bur
    Commented 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.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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