Как достигнуть мягкого присвоения Стиля?

Question

[именно самое]

Решил Я сделать слайдер. Он получился, спасибо всем ребятам которые помогали консультациями. Получилось как получилось, но не суть.

А суть вот в чем : При первоначальной загрузке сайта выползает белый экран при присвоении каждого стиля и получается как будто дергается все. Непонятно в какую сторону смотреть чтобы решить эту проблему.

НО!! Было замечено именно в Гугль хром Браузере. После выполнения сайта при его перезагрузки с помощью "F5". " Все идёт плавно выполняя transition-timing-function: linear; и transition: all 1s ease-in-out и z-index:70;

body.main {background: 
/*    url(foto/69.jpeg) no-repeat;*/
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    background-attachment: scroll; /* Не трогать эту строку она обеспечивает перемещение фона!! */
    background-position: 100% 50%;
    margin:0;
    
    transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
        
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
  z-index:70;
   }

 .bg1 { background: 
    url(foto/1.jpeg) no-repeat;
    transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
        
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
   z-index:70;}
    
  .bg2 { background: 
    url(foto/2.jpeg) no-repeat;
    transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
        
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
   z-index:70;}

Вот весь JavaScript
Его бы еще зациклить его весь, но все попытки объединить его в бесконечный цикл for(;;) увенчались зависанием "мопеда" - машины. Посоветывайте что нибудь. добрые люди.

var i=1;

var body = document.querySelector('body')
body.classList.add('bg'+i);

  var q = setInterval(function(){
      i==15&&clearInterval(q);
      body.classList.add('bg'+(i++)); 
   }, 6000);

Answer 1

[Stalker_RED]

Если вам нужно зацикливание, зачем делать clearInterval()?

Пример: jsfiddle.net/p0zm7gta
Контейнер .bg-cont не обязателен, просто в jsfiddle body скрыт, не так наглядно будет.
Надеюсь, в стилях ничего не сломал? Если и сломал, сам принцип переключения классов должен быть понятен.

Answer 2

[Павел Волынцев]

Надо воспользоваться предзагрузкой изображений. Так многие слайдеры делают.

Сначала присваиваем класс с картинкой какому-нибудь второстепенному объекту, а затем по таймауту - целевому объекту.