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

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

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

Комментарии:

1. Привет. Удалось ли вам решить эту проблему? Если да, не могли бы вы уведомить как таковой, когда у вас появится такая возможность? Было бы неплохо очистить это и удалить из моей очереди внимания.

2. сделаю, извините за задержку с ответом, был занят:(

Ответ №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>
  

Комментарии:

1. эй, итак, я попробовал это, и оно загружает первое изображение, но оно просто остается на этом изображении даже после 10-секундного тайм-аута. это не удаляет активный класс и не загружает следующий. Я добавил атрибут onError к элементам img. Не знаю, имеет ли это значение, но я завернул весь файл js в $ (document). готово(функция() {}

2. Ах, ну, я вижу ошибку: если изображение «# screen-2-image-1» плохое, то изображение «# screen-1-image-1» никогда не деактивируется. Я отредактирую код, чтобы исправить эту проблему.

3. я также получаю эту ошибку консоли: ReferenceError: $ не определен [Подробнее] из моего index.html в строке 1: 1

4. Спасибо! Я подумал, что должны быть инструкции else для удаления последнего изображения, если следующее изображение плохое, а также для перехода к следующему изображению в списке

5. Ошибка «$ не определено», похоже, заключается в том, что вам не хватает jquery. На это стоит обратить внимание, поскольку большая часть вашего кода (и, следовательно, моего кода) зависит от него.