Javascript-форум - Скрипт плавной смены background-image в div

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Скрипт плавной смены background-image в div (https://javascript.ru/forum/dom-window/50350-skript-plavnojj-smeny-background-image-v-div.html)

Цитата:

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

Что то не работает этот вариант.

возможно вы не учли загрузку страницы. скрипт вниз страницы или DOMContentLoaded

Работает последний вариант

<style>
#foto_index{
	transition:all 3s ease;
	 -webkit-transition:all 3s ease;
	 -moz-transition:all 3s ease;
	 -o-transition:all 3s ease;
	opacity: 1;
	background: url("http://javascript.ru/cat/list/mobile.jpg") no-repeat center;
	z-index: -2;
	min-height: 600px;	
	margin-top: -50px;
	margin-right: 0;
	margin-left: 0;
	-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    background-size:cover;
}
</style>
<div id='foto_index'></div>
<script>
var mas = [
			'http://javascript.ru/cat/list/donkey.gif',
			'http://javascript.ru/cat/list/js.gif',
			'http://javascript.ru/cat/list/project.jpg',
			'http://javascript.ru/cat/list/appscript.png'
    ], i=1;
function csaHead(){
  if(i > (mas.length-1)){
    i=0;
 	}
 	document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i++;
  setTimeout(csaHead,5000)
}
csaHead()
</script>

Вроде работает, но у меня глючит время от времени ... пустой фон и весе
http://d-fitness.com.ua/new/start

пробовал safari, faer, chrom ( mac os ) везде глюк. с первого разо пустые места. windows Chrom, глючит. IE11 Это вообще ШОК!

macik,
возможно ошибка вроде этой
https://laravel.ru/forum/viewtopic.php?id=147

Цитата:

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

с первого разо пустые места

возможно не успевает загрузиться картинка/картинки

подчистил пробелы и уменьшил количество картинок. Вроде заработало
Больше всего мне кажется виноват

transition:all 1s ease;

Как только я увеличиваю время перехода, сразу начинаются глюки.

глюк с не активным окном все равно присутствует ...
Кто подскажет код на основе

requestAnimationFrame

Я то у меня не получается ...

macik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
#foto_index{
  transition:all 3s ease;
   -webkit-transition:all 3s ease;
   -moz-transition:all 3s ease;
   -o-transition:all 3s ease;
  opacity: 1;
  background: url("http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg") no-repeat center;
  z-index: -2;
  min-height: 600px;
  margin-top: -50px;
  margin-right: 0;
  margin-left: 0;
  -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    background-size:cover;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var mas = [
      'http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg',
      'http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg',
      'http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg'
    ], i=0, a = performance.now();
function csaHead(b){
   if(b - a > 5000) {
    a = b;
    document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i = ++i % mas.length;
  }

  requestAnimationFrame(csaHead)
}
csaHead()
});
</script>
</head>

<body>

<div id='foto_index'></div>



</body>
</html>

Спасибо. Этот вариант лучше работает при возврате с фоновой работы ...
Но старт на холодную тоже плох. первый показ рваный без плавного перехода.