Блог

У меня есть созданное мной приложение, которое циклически просматривает изображения и некоторые видео каждые 10 секунд в контролируемом формате. Я пытаюсь выяснить, есть ли способ пропустить изображение в списке изображений, если предоставленный идентификатор не загружает изображение (в основном изображение src не существует).

Изображения извлекаются из папки ресурсов. Я заглянул в jquery .load, но я не уверен, как завершить весь цикл изображения и проверить, существует ли изображение одновременно.

 function takeover_timing() {

    // LOOP 1
    setTimeout(function() {
      $("#screen-1-image-1").addClass("active");
    }, 10000); // 10 seconds

    setTimeout(function() {
      $("#screen-1-image-1").removeClass("active");
      $("#screen-2-image-1").addClass("active");
    }, 20000); // 20 seconds

    setTimeout(function() {
      $("#screen-2-image-1").removeClass("active");
      $("#screen-3-image-1").addClass("active");
    }, 30000); // 30 seconds

    setTimeout(function() {
      $("#screen-3-image-1").removeClass("active");
      $("#screen-1-image-2").addClass("active");
    }, 40000); // 40 seconds


    // total time: 40 seconds
    // don't repeat this function until we're done with everything above
    setTimeout(takeover_timing, 40000);
  }
  

Если в #screen-2-image-1 нет изображения или видео, я бы хотел, чтобы оно переходило к следующему изображению в функции takeover_timing #screen-3-image-1

Хорошо, это довольно смущает. Я ответил на это несколькими различными способами (извините) и, наконец, я собираюсь предоставить следующее решение, которое максимально приближено к оригинальной технике, насколько я могу. Это протестировано и должно работать:

Код изображения:

   <img id='#screen-1-image-1' src='myImage1' onError='$(this).addClass("badMedia")'>
  <img id='#screen-1-image-2' src='myImage2' onError='$(this).addClass("badMedia")'>
  <img id='#screen-1-image-3' src='myImage3' onError='$(this).addClass("badMedia")'>
  <img id='#screen-1-image-4' src='myImage4' onError='$(this).addClass("badMedia")'>
  

Javascript:

 <script>
    var priorMedia = $("#i4");
    function takeover_timing() {
        var timeout = 0;

        if (!$("#screen-1-image-1").hasClass("badMedia"))
        {
            let toDeactivate = priorMedia;
            setTimeout(function() {
                toDeactivate.removeClass("active");
                $("#screen-1-image-1").addClass("active");
            }, timeout);
            priorMedia = $("#screen-1-image-1");
            timeout  = 1000;
        }

        if (!$("#screen-1-image-2").hasClass("badMedia"))
        {
            let toDeactivate = priorMedia;
            setTimeout(function() {
                toDeactivate.removeClass("active");
                $("#screen-1-image-2").addClass("active");
            }, timeout);
            priorMedia = $("#screen-1-image-2");
            timeout  = 1000;
        }

        if (!$("#screen-1-image-3").hasClass("badMedia"))
        {
            let toDeactivate = priorMedia;
            setTimeout(function() {
                toDeactivate.removeClass("active");
                $("#screen-1-image-3").addClass("active");
            }, timeout);
            priorMedia = $("#screen-1-image-3");
            timeout  = 1000;
        }

        if (!$("#screen-1-image-4").hasClass("badMedia"))
        {
            let toDeactivate = priorMedia;
            setTimeout(function() {
                toDeactivate.removeClass("active");
                $("#screen-1-image-4").addClass("active");
            }, timeout);
            priorMedia = $("#screen-1-image-4");
            timeout  = 1000;
        }

        // don't repeat this function until we're done with everything above
        setTimeout(takeover_timing, timeout);
    }
    takeover_timing();
</script>