[英]Javascript with HTML5 using Picture to serve Webp
這是 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 更好的方法。 也不想閃爍。
嘗試可以自動提供正確圖像格式的imagekit.io
免責聲明:我是 ImageKit.io 的聯合創始人
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.