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

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>