Javascript с HTML5 с использованием изображения для обслуживания 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>

Мне нужно обслуживать некоторые веб-страницы и чередовать два изображения с откатом к png. Это работает, но я хочу знать, есть ли лучший способ, чем переделывать innerhtml и вместо этого просто переключать srcset. Не хочу мерцания, а также.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
100
1

Ответы 1

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

Отказ от ответственности: я соучредитель ImageKit.io

Другие вопросы по теме