Почему мое изображение ведет себя странно при переходе в следующее и последнее изображение в массиве?

Question

Я не понимаю, почему предыдущее изображение показывается в течение доли секунды, прежде чем перейти к следующему изображению после нажатия.

Кроме того, когда я достигаю последнего изображения, он должен перенаправить на indexTwo.html, что он делает успешно.Однако «изображение вниз», исходящее из атрибута alt в <img/>, отображается в течение примерно двух секунд, прежде чем оно успешно достигнет indexTwo.html.

Я пробовал много разных попыток исправить это, слишком много, чтобы перечислить!

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

Вот мой HTML:

<img id="the-image" class="img-responsive"
     src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"
     alt="image down"
     onclick="clickedImage()"
/>

Вот мой JS:

let theImage = document.getElementById('the-image');

let index = [
    "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png",
    "https://cdn.tutsplus.com/net/uploads/legacy/155_drupal/200x200.png",
    "https://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png"
];

let op = 1;
let imageId = 0;

let clickedImage = () => {
    // start animation opacity
    if(op === 1) {
        let timer = setInterval(() => {
            if(op <= 0.1) {
                // load the next image
                imageId = imageId + 1;
                console.log(imageId);
                theImage.src = index[imageId];

                if (imageId >= index.length) {
                    window.location = "indexTwo.html";
                }

                // reset the opacity
                theImage.style.opacity = op = 1;
                clearInterval(timer);
            } else {
                op -= 0.1;
                theImage.style.opacity = op;
            }
        }, 100);
    }
};

Answer 1

Проблема в том, что вы переполняете массив.

Когда imageId == 3, тогда следующая строка:

theImage.src = index[imageId];

приводит к тому, что theImage.src устанавливается в undefined.

Простой способ решить эту проблему - изменить код, чтобы изображение переходило к следующему изображению только в том случае, если идентификатор находится в пределах массива.

let clickedImage = () => {
    // start animation opacity
    if(op === 1) {
        let timer = setInterval(() => {
            if(op <= 0.1) {
                // load the next image
                imageId = imageId + 1;
                console.log(imageId);

                if (imageId >= index.length) {
                    window.location = "indexTwo.html";
                } else {
                    theImage.src = index[imageId];
                    // reset the opacity
                    theImage.style.opacity = op = 1;

                }
                clearInterval(timer);
            } else {
                op -= 0.1;
                theImage.style.opacity = op;
            }
        }, 100);
    }
};