JSは待たずに画像のプリロードを実装します

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函数。 
callback.call(img); // 将callback函数this指针切换为img。 
}; 
}

さて、別のテスト ケースを作成しましょう。

次のようにコードをコピーします:

function imgLoaded(){ 
alert(this.width); 
} 
<input type="button" value="loadImage" onclick="loadImage(&#39;aaa.jpg&#39;,imgLoaded)"/>

Firefox でテストして、期待どおりであることを確認します。画像がダウンロードされると、画像の幅が表示されます。何度クリックしたり更新したりしても、結果は同じです。

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

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

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

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

コードを次のようにコピーします:

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

非常に苦労した後、最終的に各ブラウザが目標を達成できるようにしました。コードは非常に単純ですが、画像ブラウザの核心的な問題を解決します。次に行う必要があるのは、画像を表示する方法だけです。

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