画像のプリロード中に不明な _javascript スキルを非表示にする

マンチェスター・ユナイテッドとマンチェスター・シティの地元ダービーを観た後、待ちに待った全国ダービーを観るまでにはまだ2時間もの長い時間がある。私はとても退屈で何もすることがなかったので、たむろするためにフォーラムに来ました。画像のプリロードに関するブログ投稿を見ました。コードは次のとおりです:

ネットで関連記事を探してみると、大体こんな感じです。
このメソッドの機能は問題ありませんが、いくつかの隠れた危険性があります。
1 イメージの onload イベント ハンドラーとして一時的な匿名関数を作成し、クロージャを形成します。
IE でのメモリ リーク パターンに関する記事を皆さんもご覧になったことがあると思います。パターンの 1 つは循環参照であり、クロージャには (スコープ チェーンの実装に応じて) 外部の動作環境を保存する機能があります。 onload 関数は img への参照も保存しますが、これにより循環参照が形成され、メモリ リークが発生します。 (このモードのメモリ リークは、IE6 の以前のバージョンにのみ存在します。パッチが適用された IE6 以降のバージョンの IE では、循環参照によって引き起こされるメモリ リークの問題が解決されています。)

2 は静的画像の読み込みのみを考慮し、onload を複数回トリガーする可能性がある GIF などの動的画像を無視します。
上記の 2 つの問題を解決するのは非常に簡単です。実際、コードは次のとおりです。

これにより、メモリリークの問題を解決できるだけでなく、動的画像の複数のトリガーの問題も回避できます。イベント。
一部の関連ブログ投稿では、img.onload を null に設定する必要があることに気づいた人もいますが、ほとんどの記事ではコールバックの実行後に img.onload を null に設定することで問題を解決できます。循環参照の問題はありますが、動的なピクチャの場合、コールバックの実行に時間がかかる場合、複数回トリガーされる危険性が潜んでいます。
上記の修正により隠れた危険性は排除されましたが、このコードにはまだ最適化の余地があります:
このコードについては、関連するブログ投稿の説明を読んでください。理由は次のとおりです。複数のブラウザのバージョンを確認したところ、IE と Opera では、画像が一度ロードされた後、その画像に対する別のリクエストがあった場合、ブラウザはすでに画像をキャッシュしているため、新しいリクエストは開始されず、直接ロードされることがわかりました。キャッシュから来てください。 Firefox と Safari では、これら 2 つの読み込みメソッドをユーザーに対して透過的にしようとします。これにより、画像の onload イベントも発生しますが、IE と Opera はこのアイデンティティを無視し、画像の onload イベントを発生させません。上記のコードは、その中では効果を達成できません。

確かに、IE と Opera では、キャッシュされた画像の初期状態は、Firefox、Safari、Chrome とは異なります (興味がある場合は、別のブラウザでテストして、以前の img の状態を img に与えることができます) src にはキャッシュされた画像の URL が割り当てられますが、onload イベントのトリガーはブラウザーに関係なく一貫しています。この問題の根本原因は、img の src 値と onload イベントのバインディングの順序が間違っていることです (IE と Opera では、イメージがキャッシュされ、onload イベントが逃しました）。最初に onload イベントをバインドしてから、src に値を割り当てる必要があります。コードは次のとおりです。


function loadImage(url, callback) {