Javascript 和 HTML5 使用图片来服务 Webp

Question

这是 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>

我需要提供一些 webp 并在两个图像之间交替，并返回到 png。 它有效，但我想知道是否有比重做 innerhtml 并只切换 srcset 更好的方法。 也不想闪烁。

Answer 1

尝试可以自动提供正确图像格式的imagekit.io

免责声明：我是 ImageKit.io 的联合创始人