Как сделать смену картинки body с таймером без анимации?

Question

[Sweeatygg]

Добрый день господа, нужна ваша помощь. Мне нужна помощь необходимо менять n-ное количество фонов для body через определённое время каждой картинки( все картинки с разным временем) . Я нашёл множество тем где есть готовые решение,но мне надо кое что другое - в тем решениях была анимация смены картинки, то есть там была анимация моргания белым цветом перед сменой картинки,а мне надо чисто смену картинки без визуальных анимаций. Очень прошу помочь почти неделю мучаюсь с этим вопросом.

Comments

[xtress]

Вы хотя бы приведите пример того, что вы нашли и того что вы попробовали

[Sweeatygg]

xtress, щас

[Sweeatygg]

Answer 1

[Павло Пономаренко]

Будет менять по кругу все картинки из списка:

const pictures = [
	{ src: 'src1', delay: 1000 },
	{ src: 'src2', delay: 2000 },
	{ src: 'src3', delay: 3000 },
	{ src: 'src4', delay: 4000 },
]
let current  = 0;

function nextImage () {
  var img = new Image;
  img.src = pictures[current].src;
  img.onload = function () {
    document.body.style.backgroundImage = 'url(' + pictures[current].src + ')';

    current++;
    if (current >= pictures.length) current = 0;

    setTimeout(nextImage, pictures[current].delay);
  }
}

nextImage();

Comments

[Sweeatygg]

не надо именно что бы каждая через определённое время менялась

[Павло Пономаренко]

Sweeatygg, поправил. Плюс добавил предзагрузку, чтобы не было белого мерцания.

[Sweeatygg]

Павло Пономаренко, а нука

Answer 2

[X0lera]

const list_pictures = [
  {
    img: 'img',
    counter: 0
  },
  {
    img: ''img,
    counter: 20000
  },
  {
    img: 'img',
    counter: 30000
  },
  {
    img: 'img',
    counter: 10000
  }
]

list_pictures.map( item => {
  setTimeout(() => 
    document.body.style.backgroundImage = `url(${item.img})`
  ,item.counter)
})

Comments

[Sweeatygg]

щас проверю, если сработает ноги буду целовать)

[Павло Пономаренко]

Sweeatygg, учтите, что поменяется 4 картинки и на этом остановится.

[Sweeatygg]

Скрипт меняет картинки,но когда меняется появляется тот самый эффект анимации мерцание белое и потом новая картинка,нужно именно без этого мерцания

[Павло Пономаренко]

Sweeatygg, проблема в том, что они не сразу подгружаются.

[Sweeatygg]

Павло Пономаренко, Господи спасибо тебе большое, с этим вопросом неделю мучался. а всё оказывается в подгрузке...

Answer 3

[Sweeatygg]

//HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pros">
  <div class="content__bg content__bg_img--0">
    
  </div>
</div>

/// JS

<script type="text/javascript">
var editBg = function(content__bg) {
  var contents__bg = $('.pros').find('.content__bg');
  contents__bg.animate({opacity: ''}, 500);
  setTimeout(function() {
    contents__bg.remove();
  }, 500);
  $('.pros').prepend($('<div class="content__bg '+content__bg+'"></div>'));
};
$(function() {
  setTimeout(function() {
    editBg('content__bg_img--1');
  }, 1000);
  setTimeout(function() {
    editBg('content__bg_img--2');
  }, 1400);
  setTimeout(function() {
    editBg('content__bg_img--3');
  }, 1800);
  setTimeout(function() {
    editBg('content__bg_img--4');
  }, 2200);
  setTimeout(function() {
    editBg('content__bg_img--5');
  }, 2400);
});
</script>

// CSS

<style type="text/css">

.content__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  pointer-events: none;
}
.content__bg_img--0 {background-image: url('assets/img/bg1.1.jpg')}
.content__bg_img--1 {background-image: url('assets/img/bg1.1.jpg')}
.content__bg_img--2 {background-image: url('assets/img/bg1.2.jpg')}
.content__bg_img--3 {background-image: url('assets/img/bg1.3.jpg')}
.content__bg_img--4 {background-image: url('assets/img/bg1.4.jpg')}
.content__bg_img--5 {background-image: url('assets/img/bg2.jpg')}


</style>

Comments

[Sweeatygg]

вот тут мерцает экран при смене картинок, как бы убрать это мерцание