イメージダウンロードの完了を検出する最適な方法は何ですか - onloadまたはaddEventListener（）？

Question

イメージのダウンロードが完了したことを検出するには、どのメソッドを使用する必要がありますか？

image.onload = function() {} 

又は

image.addEventListener("load", function() {}); 

Answer 1

onload:

1. 単一のリスナーをサポートします。
2. すべてのブラウザで動作します。
3. onloadプロパティを消去して、イベントハンドラをバインド解除します。

addEventListener:

1. 複数のリスナーをサポートします。
2. 古いIEブラウザでは機能しません（attachEventを使用）。
3. 元のeventListenerを特定する情報を必要とするremoveEventListener()でリスナーのバインドを解除します。

addEventListenerがサポートされていて、リスナーが1つだけ必要な場合は、どちらかを使用できます。

他に誰もいなくなる単純な自己完結型コードの場合は、onloadを使用しても問題はありません。他の開発者が混乱する可能性のあるより複雑なソフトウェアで、拡張性が必要な場合、イベントリスナーのクロスブラウザサポートがある場合は、addEventListener()はより柔軟性があり、おそらくより望ましいでしょう。

Answer 2

image.addEventListener("load", function() {});すべてのブラウザで動作しますが、バックアップを持っていて、すでに画像上に存在する任意のonloadイベントをオーバーライドしていないという利点を持つことになりますimage.attachEvent("onload", function() {})

if(image.addEventListener) { image.addEventListener("load",function() {}); } 
else { image.attachEvent("onload", function() {}); } 

これを使用して、と仮定していないだろうあなたのonloadイベントは、他のコードによって上書きされることはありません。

DOM要素の "onload"属性を直接変更することは、通常、「ちょっと、設定することで数行のコードを保存することができ、リスナーが1つだけ必要なのでaddEventListener/attachEventを使うのではなく、ちょうどそれを設定してください。 "しかし、それはいつも"私は後で別のものを追加する必要があるのですか？ "

このため、JavaScript開発者は通常、イベントを添付するためにライブラリを使用しているので、1行のコードで自信を持ってリスナーを追加でき、すべてのブラウザで機能します。

Answer 3

if(image.complete){ 
    //.... 
} 

Answer 4

両方を試してみてください、Image.completeなどimage.onloadはWebkitの、私の携帯に少なくともバージョンでは動作していないようです。彼らは無限にfalseを返します。それはオペラでも動作するので、コードは大丈夫かもしれません。

したがって、私は現在、少なくともオペラとウェブキットで動作するトリックを使用しています。1x1ピクセルのプレースホルダー画像を準備しました。今度は、srcをロードするイメージと（通常は悪い習慣ですが、これはそのイメージなしでは始めることができないゲームです）私はループの中にいくつかの "読み込み"スプラッシュスクリーンgfxを更新しますが、基本的には幅をチェックしますimage.widthが1ピクセルより大きいかどうかを判定します。

私が言ったように、オペラとウェブキットでのみテストしました。私はそれを使ってアトラスイメージをロードし、含まれているタイルをキャンバス上の個々のイメージにコピーします。終了すると、アトラス画像のsrcは1x1のプレースホルダに戻されるため、このように再度使用できます。完全な洞察力を得るには、プレースホルダが再び1ピクセル幅になるまで待ってから、再利用してください。