制御された形式で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で次の画像にスキップさせたいと思います。
わかりました、これはかなり恥ずかしいです。私はこれにさまざまな方法で答えました（申し訳ありません）。最後に、元の手法にできるだけ近い次のソリューションを提供します。これはテスト済みで、機能するはずです。
画像コード：
<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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加