как изменить src изображения при щелчке и его возврат к оригиналу через некоторое время?

У меня есть страница, которая отображает несколько скрытых дивов при нажатии на кнопки изображения (next и previous). иногда требуется несколько секунд, чтобы его содержимое отображалось правильно, поэтому у меня возникла идея немного отложить функции, чтобы "дать время" содержимому "подготовиться". В это время изображение обменивается на gif. Я уже начал и увидел, что это работает, я получил простой способ с tris.src Изменить img и setInterval для задержки, прямо на моем onclick="", но мне нужно исходное изображение, чтобы автоматически вернуться к оригиналу через 2 или 3 секунды, потому что он может показать снова (при нажатии на предыдущую кнопку) и не должен быть gif больше! и не знаю, как это сделать. Вы не могли бы мне помочь?

CSS:

Div1, #div2 {ширина: 100px; высота: 100px; фон: желтый; положение: относительное;

Далее {позиция: абсолютное дно: 20px; слева: 20px}

} HTML & JS: 

<div id="div1">
    content1
    <img src="next.png" id="next" onclick="setTimeout(replace, 1000); this.src='prev.png'">
    <input type="hidden" value="prev.png" id="hdnPreviousPng" />
</div>

<div id="div2" style="display: none">content2
    <img src="next.png" id="next" onclick="setTimeout(replace2, 1000); this.src='prev.png'">
    <input type="hidden" value="prev.png" id="hdnPreviousPng" />
</div>

<script>
    function replace() { 
        document.getElementById("div1").style.display="none"; 
        document.getElementById("div2").style.display="block";
        setInterval(function(){
             let originalSrc = $('#hdnPreviousPng').val();
             $('#next').attr('src', originalSrc);

        }, 3000); 
    }
    function replace2() { 
        document.getElementById("div2").style.display="none"; 
        document.getElementById("div1").style.display="block";
        setInterval(function(){
             let originalSrc = $('#hdnPreviousPng').val();
             $('#next').attr('src', originalSrc);

        }, 3000); 
    }
</script>
1 2
javascript setinterval src

1 ответ:

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

Вот пример того, как это будет работать с помощью JavaScript: 

function clicked() {
  replace();
  setTimeout(replace, 1000);
}

function replace() {
  var next = document.getElementById("next").getAttribute("data-img-src");
  var current = document.getElementById("next").src;

  document.getElementById("next").setAttribute("data-img-src", current);
  document.getElementById("next").src = next;
}
<div id="div1">
  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>

Если вам нужно учесть несколько кликов и все же вернуться к исходному изображению, вам понадобится еще некоторое состояние и вы можете попробовать следующее: 

function clicked() {
  replace();
  setTimeout(replaceOriginal, 1000);
}

function replace() {
  var next = document.getElementById("next").getAttribute("data-img-src");

  document.getElementById("next").src = next;
}

function replaceOriginal(){
  var original = document.getElementById("next").getAttribute("data-img-original");

  document.getElementById("next").src = original;
}
<div id="div1">
  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-original="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>
2