Пропустите изображение и перейдите к следующему, если src не существует для приложения обмена изображениями

Question

У меня есть приложение, которое я построил, который циклически просматривает изображения и некоторые видео каждые 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

Answer 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>