読み込みに失敗したイメージ配列からイメージを削除またはスキップするには？

Question

私は、Javascriptを使用して一連のマップイメージ用の単純なアニメーションビューアを作成しようとしています。私が最初にこの

while(datetime <= endDatetime) 
{ 
    var fname = getImgFnameFromDate(datetime); 
    var imgAdd = new Image(); 
    imgAdd.src = fname; 
    imgStore.push(imgAdd); 
    datetime.setMinutes(datetime.getMinutes() + 15); 
} 

し、各画像間の短い待ち時間でそれらをループ状グローバル配列に画像を読み込みます。

ここで、マップはほぼリアルタイムで作成され、時には一部が欠落することがあります。ファイルが読み込まれず、代わりにアニメーションの途中で壊れたリンクイメージが表示されます。私は単純に、読み飛ばされなかった画像をスキップしたいのですが、その画像をスキップしたり、配列から取り除いたりしています。

私は

function iter() 
{   
    ++imgIndex; 
    if (loopFlag) imgIndex = imgIndex % imgStore.length; 
    document.getElementById("map").src=imgStore[imgIndex].src; 
    if (imgStore[imgIndex].width == 0) iter(); 
} 

のようなものは、しかし、これは信頼性が低いと、多くの場合、イメージがあったの前にトリガするために表示される無限ループにつながるすなわち「isLoaded」のプロキシとしてイメージwidth属性を使用して試してみましたロードするチャンス。

私は画像のonError関数を指定しようとしましたが、その関数が何をすべきか分かりません。私は本当にイベントではなく、何らかのisLoaded属性が必要です。多分、私はこれについて間違った方法をとっていますか？あなたはそれをロードする際に、画像オブジェクトにフラグを設定し、後でそのフラグをテストすることができます

Answer 1

：

if (imgStore[imgIndex].myLoadFlag) { 
    // image has been loaded 
} 

を：

var fname = getImgFnameFromDate(datetime); 
var imgAdd = new Image(); 
imgAdd.onload = function() { 
    this.myLoadFlag = true; 
} 
imgAdd.src = fname; 
imgStore.push(imgAdd); 

を次に他の場所で、あなたがイメージがまだロードされているかどうかを確認することができます

onloadハンドラを使用するときは、.srcプロパティを設定する前に設定することを忘れないでください。画像がブラウザのキャッシュに既に存在する場合、onloadイベントを見逃す場合があります。

---

代替アプローチ（使用する多分簡単には）のみロードされた画像が含まれており、メインコードのみということに使用する二番目の配列を持っているだろう：そして、imgStoreを使用してコードを

// place we first put images, they go into imgStore only when actually loaded 
var imgPending = []; 

var fname = getImgFnameFromDate(datetime); 
var imgAdd = new Image(); 
imgAdd.onload = function() { 
    imgStore.push(imgAdd); // now that it's loaded, add it to the images we're using 
} 
imgAdd.src = fname; 
imgPending.push(imgAdd); 

を実際に読み込まれた画像のみが表示されます。これの欠点の1つは、画像がロード順にimgStoreに入っていることです。必ずしも要求した順序である必要はなく、この方法では古い方法とは異なる可能性があります。