Почему код не работает? Js

Question

Это должно работать примерно так: Оно 1 раз проходит быструю загрузку(смену) картинки, а потом происходит медленная смена. Вообще проблема в том, что когда загружаешь страницу, вместо картинки пустое место и только после первой смены картинки она появляется. Помогите решить проблему

<script language="javascript">
    var img = 1, imgMax = 3;
    var image = document.getElementById('image');
    let i=1;
    if(i!=0){setInterval(function() {
        image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
        }, 1000);
        i--;
    } else {
        setInterval(function() {
        image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
        }, 9000);
    }
     
</script>

img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
    width: 100%;
    height: 100%;

}

<img id="image" src="1" alt="Музей">

Answer 1

Может быть картинка не успевает загрузиться? Попробуйте так

   document.addEventListener("DOMContentLoaded", function(event) {
    var img = 1, imgMax = 3;
    var image = document.getElementById('image');
    let i=1;
    if(i!=0){setInterval(function() {
        image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
        }, 1000);
        i--;
    } else {
        setInterval(function() {
        image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
        }, 9000);
    }
   });

Answer 2

Ошибка главная. Вместо

<img id="image" src="1" alt="Музей">

должно быть

<img id="image" src="1.jpg" alt="Музей">

Ошибка вторая. Этот код

let i=1;
if(i!=0){setInterval(function() {
    image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
    }, 1000);
    i--;
} else {
    setInterval(function() {
    image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
    }, 9000);
}

бессмысленен. Т.к. i всегда равно 1. Поэтому достаточно

setInterval(function() {
  image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
}, 1000);

Ну и перенести все в событие DOMContentLoaded

БЛОГ НА HUSL

Почему код не работает? Js

Ответы (2 шт):