jsイメージのプリロード例_基礎知識

JS 画像のプリロードの簡単な例

コードをコピー コードは次のとおりです:

関数loadImage( url, callback) {
if(url!='null') {
var img = new Image();
img.src = url;
if(img.complete) {
callback(img);
else { ;
> }
}

loadImage(pic_url,loadImage);



もう一つの詳細例

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

コードをコピーします

コードは次のとおりです: < ;input type= "button" name="" value="画像の読み込み" onclick="addImg('tt.jpg')" />


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

少し変更します:

コードをコピーします

コードは次のとおりです。< input type= "button" name="" value="画像の読み込み" onclick="addImg('tt.jpg')" />



実行してみると、何かおかしなことが起こっていることがわかりました。すべてのブラウザは一貫性があり、クリックごとに 1 つの画像を読み込みます。その理由は何でしょうか?
onload イベントは、IE と Opera の実行中に 1 回だけトリガーされるわけではないことがわかります。

Image オブジェクトのいくつかの属性、complete、readyState (IE 専用の値 [未初期化、complete]) について考えてみましょう (キャッシュが効果に影響しないように、イメージ名を変更してください。)

コードをコピーします

コードは次のとおりです:

上記のテストの後、完全な属性についていくつかの違いが確認できます。つまり、IE は画像がつまり、ロードされた画像が表示される場合、

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

のコードをコピーします。コードは次のとおりです。

Img.src = isrc;

Img.onload = ...


という可能性はありますか。イベントを追加する時間がないですか?

今回は存在しない画像をロードして効果を確認します:

コードをコピーします コードは次のとおりです

すべてのブラウザが onload イベントをトリガーしないことは確かです。画像がキャッシュされているかロードされているかという観点から見ると、IE と Opera は通常どおりに動作し、complete は常に false になります。
IE のreadyState は常に初期化されていません。混乱を招くのは FF で、Imgttmt.complete は常に true ですが、さらに混乱を招くのは Chrom で、最初に
new Imgttmt() が呼び出されたときに Imgttmt.complete が false になります。それ以降、Imgttmt.complete の値は常に true になります。一度もロードされていないイメージに変更すると、

FF と Chrom は最初にロードするときは同じように動作し、Imgttmt.complete 値は false になり、その後は true になります。

テスト プロセス中に、スクリプトの実行順序が onload などのイベントの追加に実際に影響を与えることもわかりました。イベントが表示された後に追加しても、実際には意味がありません。
JavaScript などのインタプリタ言語の特性上、イベントを追加する場合は、イベントをトリガーするハンドルの前にイベントを追加するように注意する必要があります。