Почему установка sr c изображения в gif, уже присутствующий на странице, сбрасывает анимацию gif для уже существующих изображений? - PullRequest
Новая
       34

Почему установка sr c изображения в gif, уже присутствующий на странице, сбрасывает анимацию gif для уже существующих изображений?

2 голосов
/ 02 мая 2020

Я кодирую веб-страницу, на которой появляется много GIF-файлов, образуя сетку. Все эти изображения на веб-странице могут фактически принимать только два разных источника: 0.gif и 1.gif, и при нажатии GIF должен переключать источник - если sr c был 0.gif, переключаться на 1.gif и наоборот.

Пока что я сделал что-то вроде этого: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My title</title>
</head>
<body>
    <img id="img0" src="0.gif">
    <img id="img1" src="1.gif">
    <img id="changing_img" src="0.gif">
</body>
<script>
    changing_img = document.getElementById("changing_img")
    changing_img.onclick = changeImg
    changing_img.currentState = 0

    function changeImg(event) {
        img = event.target
        newState = 1 - img.currentState
        img.currentState = newState
        img.src = `${newState}.gif`
    }
</script>

Работает нормально, , но Я заметил это, когда нажимаю changing_img , есть нежелательный побочный эффект: другой GIF на странице, у которой уже был новый источник changing_img, сбрасывается в начале анимации. Это отображается как в Chrome, так и в Firefox.

Пример: при первой загрузке страницы источником changing_img является 0.gif. Когда я щелкаю по нему, его источник меняется на 1.gif , а img1 сбрасывает анимацию GIF в начало.

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

...