Question

我有一个已构建的应用程序，它以受控格式每10秒循环浏览图像和一些视频。我试图弄清楚是否有一种方法可以跳过提供的id不加载图像（基本上不存在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>

如果图像交换应用程序不存在src，则跳过图像并移至下一个图像

1 个答案: