jsの画像オブジェクトとそのプリロード処理 example_javascriptスキル

ドキュメントに表示されない画像オブジェクト

ドキュメントに表示されない画像オブジェクトについては、var ステートメントを使用して定義します。

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

var myImage = new Image(); または
var myImage = new Image(

これで、myImage 変数を通常の Image オブジェクトのように扱うことができます。ただし、ドキュメントには表示されないため、lowsrc、width、height、vspace、hspace、border のプロパティはほとんど役に立ちません。一般に、この種のオブジェクトの目的は 1 つだけです。それは、画像のプリロードです。オブジェクトの src 属性に値が割り当てられると、ドキュメント全体の読み取りと JavaScript の実行が一時停止され、ブラウザーは画像の読み取りに集中できるためです。画像を事前に読み込んだ後、ブラウザのキャッシュに画像のコピーが保存され、実際に画像をドキュメントに挿入するときに、画像をすぐに表示できます。今日の Web ページには、マウスがポイントすると画像が別の画像に変更されることがよくあります。

画像を先読みする JavaScript の例

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

var imagePreload = new Image();

imagePreload.src = '002.gif';
imagePreload.src = '003 .gif';


上記の例は、少数の画像を事前に読み取るのに適しています。

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

function imagePreload() {

var imgPreload = new Image();
for (i = 0; i < argument.length; i ) {
imgPreload.src = argument[i];
}
}

imagePreload ('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');


上記の例は、次のような場合に適しています。大量の画像を事前に読み取る。

多くのブラウザでのキャッシュの問題が原因です。画像が一度ロードされた後、画像に対する別のリクエストがある場合、ブラウザはすでに画像をキャッシュしているため、新しいリクエストは開始されませんが、分析後にキャッシュから直接ロードできます。各ブラウザと互換性のある --complete 属性。したがって、次の例に示すように、イメージのオンロード イベントの前にこの値を判断するだけです。

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

function loadImage(url, callback) {

var img = new Image() //画像を事前ダウンロードするための Image オブジェクトを作成します
img.src = url ;

if (img.complete) { // 画像がブラウザーのキャッシュに既に存在する場合は、コールバック関数を直接呼び出します
callback.call(img) // 直接戻ります。 onload イベントを処理せずに
}

img.onload = function () { //イメージのダウンロード時にコールバック関数を非同期に呼び出します。
callback.call(img);// コールバック関数の this を Image オブジェクト
} に置き換えます。