javascript - イメージのダウンロードの完了を検出する最良の方法は何ですか? onload または addEventListener()?

Question

画像のダウンロードが完了したことを検出するには、どの方法を使用すればよいですか?

image.onload = function () {}

また

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

Answer 1

onload:

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

addEventListener:

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

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

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

Answer 2

試す

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

Answer 3

image.addEventListener("load", function() {} );すべてのブラウザで動作するわけではありませんが、バックアップと使用があると仮定しますimage.attachEvent("onload", function() {})

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

これには、イメージに既に存在する onload イベントをオーバーライドしないという利点と、onload イベントが他のコードによってオーバーライドされないという利点があります。

DOM 要素の「onload」属性を直接変更することは、通常はお勧めできません。単に、「これを設定することで数行のコードを節約できるし、必要なリスナーは 1 つだけなので、代わりに設定するだけです」と思うかもしれません。 addEventListener/attachEvent を使用するよりも - しかし、それは常に「後で何かを追加する必要がある場合はどうすればよいですか?」につながります。

このため、JavaScript 開発者は通常、ライブラリを使用してイベントをアタッチするため、1 行のコードで確実にリスナーを追加でき、すべてのブラウザーで動作します。

Answer 4

const handleImage=()=>{}
image.addEventListener("load",handleImage);  //adding a eventListener
image.removeEventListener("load",handleImage);  //removeing a eventListener