16

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

image.onload = function () {}

また

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

5 に答える 5

16

onload:

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

addEventListener:

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

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

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

于 2013-02-14T22:35:30.880 に答える
2

試す

if(image.complete){
  //....
}
于 2015-09-24T14:55:27.200 に答える
2

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 行のコードで確実にリスナーを追加でき、すべてのブラウザーで動作します。

于 2013-02-14T22:43:06.990 に答える
0 
const handleImage=()=>{}
image.addEventListener("load",handleImage);  //adding a eventListener
image.removeEventListener("load",handleImage);  //removeing a eventListener
于 2021-05-03T17:12:28.750 に答える