JS は、waiting_javascript スキルなしで画像のプリロードを実装します

Web サイトを開発する場合、トラフィックを考慮すると、pconline のように各ページに 1 つの画像しか表示できないため、ユーザーは閲覧するたびに画像を再度ダウンロードする必要があります。ページ全体をクリックします。しかし、Web2.0 の時代では、ユーザーがあまり長く待たずに他の画像を見ることができるように、JavaScript を使用して画像ブラウザを実装しようとする人が増えています。

画像のアドレスがわかったら、それを固定サイズの HTML コンテナー (div など) に表示する必要があります。もちろん、最も重要なことは、画像の幅と幅を知ることです。表示する画像の高さを指定し、コンテナの幅と高さを組み合わせて、特定の拡大縮小率に従って画像を表示します。したがって、画像のプリロードは画像ブラウザの中核機能となっています。

画像反転効果を行った友人は、画像を回転する際の待ち時間を避けるために、画像をローカルにダウンロードしてブラウザにキャッシュさせるのが最善であることを実際に知っています。このとき、jsのImageオブジェクトを使うのが一般的です。一般的な方法は次のとおりです:

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

function preLoadImg(url) {
var img = new Image();
img.src = url;
}

preLoadImg 関数を呼び出して、次の URL を渡します。画像は、事前にダウンロードできる画像が降りてきました。実際、ここで使用される事前ダウンロード機能は基本的に同じです。画像が事前にダウンロードされた後、img の width 属性と height 属性を通じて画像の幅と高さを知ることができます。ただし、画像ブラウザ機能を使用する場合は、画像がリアルタイムに表示されることを考慮する必要があります。たとえば、表示されたボタンをクリックすると、上記のようなコードが呼び出され、画像が読み込まれます。したがって、img.width を直接使用すると、画像は完全にはダウンロードされていません。したがって、いくつかの非同期メソッドを使用して、画像がダウンロードされるまで待ってから、img の幅と高さを呼び出す必要があります。

このような非同期メソッドの実装は実際には難しくありません。イメージのダウンロード完了イベントも非常に単純で、単純な onload イベントです。したがって、次のコードを書くことができます:

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

function loadImage (url, callback) {
var img = new Image();
img.src = url;
img.onload = function(){ //コールバック関数は、画像がダウンロードされます。
callback.call(img); // コールバック関数の this ポインタを img に切り替えます。
};
}

それでは、別のテスト ケースを書いてみましょう。

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

function imgLoaded(){
alert (this.width);
}
🎜>で Firefox でテストしたところ、画像がダウンロードされると、期待どおりに機能することがわかりました。何度クリックしたり更新したりしても、結果は同じです。

ただし、この手順を完了しても、あまり喜ぶ必要はありません。ブラウザの互換性も考慮する必要があるため、すぐに IE にアクセスしてテストしてください。はい、画像の幅も表示されます。しかし、再度ロードをクリックすると状況が異なり、応答がありません。リフレッシュしてください、同じことです。

複数のブラウザ バージョンをテストした結果、この問題は IE6 と Opera で発生するのに対し、Firefox と Safari は正常に動作することがわかりました。実はその理由は非常に単純で、ブラウザのキャッシュが原因です。画像が一度ロードされた後、画像に対する別のリクエストがある場合、ブラウザはすでに画像をキャッシュしているため、新しいリクエストは開始されず、キャッシュから直接ロードされます。 Firefox と Safari では、2 つの読み込みメソッドがユーザーに対して透過的になるため、画像の onload イベントも発生しますが、IE と Opera はこのアイデンティティを無視し、画像の onload イベントを発生させません。コード内では何の効果も得られません。

どうすればいいですか?最良のケースは、イメージが正常にロードされたかどうかを示すステータス値を持つことができることです。キャッシュからロードする場合は待つ必要がないため、このステータス値はダウンロードされたことを直接示します。http リクエストからロードする場合は、ダウンロードを待つ必要があるため、この値は未完了として表示されます。この場合、それは可能です。

分析を行った結果、さまざまなブラウザと互換性のある Image 属性が完成しました。したがって、イメージのオンロード イベントの前にこの値を判断してください。最後に、コードは次のようになります:

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

function loadImage(url, callback) {
var img = new Image() //画像を事前にダウンロードするための Image オブジェクトを作成します
img.src =
if ( img.complete) { // 画像がブラウザのキャッシュに既に存在する場合は、コールバック関数を直接呼び出します
callback.call(img)
return; // onload イベントを処理せずに直接返します
}
img.onload = function () { //画像のダウンロード時にコールバック関数を非同期的に呼び出します。
callback.call(img);//コールバック関数の this を Image オブジェクトに置き換えます
}
};

苦労した結果、ついに全員がすべてのブラウザーに私たちの目標を達成します。コードは非常に単純ですが、これで画像ブラウザの核心的な問題が解決されます。次に行う必要があるのは、画像を表示する方法だけです。

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