JavaScriptと画像読み込みイベント(onload)、読み込みステータス(complete)

昨日、jQuery プラグイン aeImageResize を使用しましたが、これにはさらに利点があることがわかりました。各画像が読み込まれた後、すぐに拡大縮小されます。 これは、イメージ オブジェクト Image の onload イベントによるものです。 プラグインのソース コードを見ると、イメージ オブジェクトの complete 属性と onload イベントにも依存しており、特に IE6 をイメージ内の他のブラウザと異なるように扱っていることがわかりました。オブジェクトを読み込んでいますか？

以下を参照してください:

js による DOM の操作は、現在のページの HTML 要素の非同期読み込みを実現するためによく使用されます。Image オブジェクトについて少し説明します。 例を見てください:

コードをコピー コードは次のとおりです: &lt ;input type= "button" name="" value="画像の読み込み" onclick="addImg('tt.jpg')" /> 関数 addImg(isrc) { var Img = new Image(); Img.src = isrc; { document.body.appendChild(Img); } }

上記のコードが含まれています。「tt.jpg」は開くときには読み込まれませんが、ボタンをクリックすると読み込まれます。読み込みが完了すると、onload イベントがトリガーされ、ページに表示されます。 「tt.jpg」画像を初めてロードすると、正常に実行されます。ボタンをクリックして画像を読み込んで表示します。このボタンを繰り返しクリックするとどうなりますか? IEやOperaでは、初回読み込み時以外は正常に表示されるのですが、再度クリックしても無反応となり、更新しても同様です。 「onload」イベントは 1 回だけトリガーされますか?キャッシュ機構なのでしょうか？ FFやChromでは、クリックするたびに画像が1枚読み込まれます。 少し変更します:

コードをコピーします コードは次のとおりです。 ;! -- 関数 addImg(isrc) { var Img = new Image(); Img.onload = function () { document.body.appendChild( Img) ; } Img.src = isrc; //->

何か奇妙なものを見つけた 何かが起こった。 すべてのブラウザは一貫性があり、クリックごとに 1 つの画像を読み込みます。その理由は何でしょうか? onload イベントは、IE と Opera の実行中に 1 回だけトリガーされるわけではないことがわかります。 Image オブジェクトのいくつかの属性、complete、readyState (IE 専用の値 [未初期化、complete]) について考えてみましょう (キャッシュが効果に影響しないように、イメージ名を変更してください。)

コードをコピーします コードは次のとおりです: var Img; function addImg(isrc) { Img = new Image(); //Img.src = isrc; Img.onload = function () { alert("complete : " Img.complete "nreadyState : " Img.readyState) document.body.appendChild(Img); Img.src = isrc;

上記のテストの後、complete 属性について、IE は画像が表示されるかどうか、つまり、読み込まれた画像が表示される場合は complete の値を判断します。属性は true、それ以外の場合は常に false で、画像が以前にロードされたかどうかとは関係がありません。つまり、キャッシュとは関係がありません。ただし、他のブラウザでは動作が異なります。画像が以前にロードされており、ブラウザにキャッシュがある限り、これは IE の readState 属性の動作と一致します。 この時点で、すべてのブラウザが画像をキャッシュしていることを確認できます。しかし、上記の問題の正確な原因は何でしょうか? ご存知のとおり、キャッシュからの読み込みは非常に高速なので、

のコードをコピーします。コードは次のとおりです。 ... Img.src = isrc; Img.onload =... ... プロセス、IE、Opera の読み込みが速すぎて、イベントを追加するには遅すぎる可能性はありますか? 今回は効果を確認するためにまったく存在しない画像をロードします:

コードをコピーします

コードは次のとおりです以下: > var Imgttmt; function addImg(isrc) { Imgttmt = new Image(); Imgttmt.src = isrc(" 完了: " Imgttmt.complete "nreadyState : " Imgttmt.readyState) Imgttmt.onload = function () { alert("impossible") } } // - ->

すべてのブラウザが onload イベントをトリガーしないことは確かです。 画像がキャッシュされているかロードされているかという観点から見ると、IE と Opera は通常どおりに動作し、complete は常に false になります。IE のreadyState は常に初期化されていません。 混乱を招くのは FF で、Imgttmt.complete の値は常に true になります。 さらに混乱を招くのは Chrom で、最初に new Imgttmt() が呼び出されたときに Imgttmt.complete が false になります。それ以降、Imgttmt.complete の値は常に true になります。 一度もロードされていない画像に変更すると、最初にロードするときは Imgttmt.complete の値が false になり、その後は true になります。 テスト プロセス中に、スクリプトの実行順序が onload などのイベントの追加に実際に影響を与えることもわかりました。イベントが表示された後に追加しても、実際には意味がありません。 JavaScript などのインタプリタ言語の特性上、イベントを追加する場合は、イベントをトリガーするハンドルの前にイベントを追加するように注意する必要があります。