Javascript-форум - Смена backgroundImage

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Смена backgroundImage (https://javascript.ru/forum/misc/60329-smena-backgroundimage.html)

Смена backgroundImage

Всем привет!
Нужна функция плавной зацикленной смены backgroundImage.
Сейчас использую смену css классов:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 8000);

Может мне кажется, но она сильно нагружает браузер и плавность смены изображений не работает в IE.
Если не трудно покажите как подобное можно сделать на JS, может без использования классов, а через document.body.style.backgroundImage = "url('..')"
Спасибо откликнувшимся!

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    html, body {
      height: 100%;
    }
  </style>
</head>
<body>
  <script>
    var colors = ['red', 'green', 'blue', 'grey', 'orange'],
        i = 0;

    setInterval(function() {
      document.body.style.background = colors[++i % colors.length];
    }, 2000)
  </script>
</body>
</html>

K_PECT, только вместо цветов, урлы картинок в массив вставь.

Очень помогли! Спасибо большое! Но как быть с плавностью? Если не трудно покажите на setTimeout

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    html, body {
      height: 100%;
    }
    
    body {
      -webkit-transition: background 1s linear;
      -moz-transition: background 1s linear
      transition: background 1s linear;
    }
  </style>
</head>
<body>
  <script>
    var colors = ['red', 'green', 'blue', 'grey', 'orange'],
        i = 0;

    setTimeout(function foo() {
      document.body.style.background = colors[++i % colors.length];
      setTimeout(foo, 2000)
    }, 2000)
  </script>
</body>
</html>

Не знаю мож это у меня так, но IE11 видимо не поддерживает
background 1s linear;

K_PECT, как вариант, наложить два img и им уже менять opacity.

Ruslan_xDD, не дойду сам! Покажите, пожалуйста

transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;

Не работает в IE
Вот этот пример работает в IE. Покажите, пожалуйста, как собрать на основании него смену document.body.style.background
И если не трудно на setTimeout
Необходимо менять изображение у body

K_PECT, чем мой пример выше не устроил, если не секрет?

1. Он на setInterval
2. Необходимо менять изображение у body
3. Нужно без СSS

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html{
    height:100%;
  }

  body{
    margin:0 auto;
    width:100%;
    height:100%;
    background-image:url("http://uviprint.ru/wp-content/gallery/vid/vid_007.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  body:before{
    width:100%;
    height:100%;
    animation-name:Fade;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-duration:10s;
    animation-direction:alternate;
    content:'';
    display:block;
    background-image:url("http://pic5.bbzhi.com/chuangyibizhi/shejishimengxiangzhongdefengguangbizhi/shejishimengxiangzhongdefengguangbizhi_469563_2.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  @keyframes Fade{
    0%{
      opacity:0;
    }

    35%{
      opacity:1;
    }

    55%{
      opacity:1;
    }

    100%{
      opacity:0;
    }
  }
  </style>
</head>

<body>

</body>

</html>

Отличный пример! Я понимаю, что достал но не работает в IE

Цитата:

Сообщение от K_PECT

1. Он на setInterval
2. Необходимо менять изображение у body
3. Нужно без СSS

А чем interval не нравится? Тоже самое. Поменять не проблема.

Просто дайте основному блоку position: fixed/absolute и z-index: -1, и будет Вам счастье.

Может я изначально не правильно объяснил.
Нужно менять изображение у body меняя прозрачность.

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 8000);

body { 
height: 100%;
width: 100%;
background: url(../img/bgr/1.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
}
.background1 {
background: url(../img/bgr/2.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
}
.background2 {
background: url(../img/bgr/1.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
}

Этот код работает. Но видимо из-за jquery и setInterval очень нагружает браузер и вдобавок

ms-transition

не работает в IE.
Нужно подобное на js, setTimeout с поддержкой IE

Обидно, что забили

K_PECT, в IE нельзя сделать плавность фону.

Ruslan_xDD,
а если через канвас обработать массив картинок, возможно через шейдер и вставлять в css этапы перехода.

рони, мне кажется не производительно будет каждый раз картинку в CSS перезаписывать.