Вот код HTML и Javascript.
<div class = "col-md-6 col-lg-4">
<div class = "work-box">
<div class = "work-img" id = "Starcraft">
</div>
<div class = "work-content">
<div class = "row">
<div class = "col-sm-8">
<h2 class = "w-title">Starcraft Animation</h2>
<div class = "w-more">
<a href = "https://github.com/ArundeepChohan/Coursework/tree/master/2130/Assignment2" target = "_blank"><span class = "w-ctegory">Code</span> </a>
</div>
</div>
<div class = "col-sm-4">
<div class = "w-like">
<a href = "img/StarcraftAnimation.png" data-
lightbox = "gallery-mf"> <span class = "ion-ios-plus-outline"></span></a>
<a href = "img/StarcraftAnimation2.png" data-
lightbox = "gallery-mf"> <span class = "ion-ios-plus-outline"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var myIndex = 0;
function carousel() {
if (myIndex==0)
document.getElementById('Starcraft').innerHTML = ('<picture><source srcset = "img/StarcraftAnimation.webp" type = "image/webp" class = "img-fluid"><img src = "img/StarcraftAnimation.png" alt = "StarcraftAnimation" class = "img-fluid" ></picture>');
else
{
document.getElementById('Starcraft').innerHTML = ('<picture><source srcset = "img/StarcraftAnimation2.webp" type = "image/webp" class = "img-fluid"><img src = "img/StarcraftAnimation2.png" alt = "StarcraftAnimation" class = "img-fluid" ></picture>');
}
myIndex++;
if (myIndex > 1) {myIndex = 0}
setTimeout(carousel, 5000); // Change image every 5 seconds
}
carousel();
</script>
Мне нужно обслуживать некоторые веб-страницы и чередовать два изображения с откатом к png. Это работает, но я хочу знать, есть ли лучший способ, чем переделывать innerhtml и вместо этого просто переключать srcset. Не хочу мерцания, а также.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Попробуйте imagekit.io, который может автоматически отображать правильный формат изображения.
Отказ от ответственности: я соучредитель ImageKit.io