div>
ご覧のとおり、画像をロードするたびに、「img1 = new Image();」などの変数を作成し、画像のソース アドレスを宣言する必要があります。 "img3.src = "../path /to/image-003.gif";" のように。このパターンを使用すると、必要な数の画像をロードできます。
このメソッドを再度改良しました。このスクリプトを関数にラップし、addLoadEvent() を使用して、ページが読み込まれるまでプリロード時間を遅らせます。
function preloader() {
if (ドキュメント.イメージ) {
var img1 = 新しい画像();
var img3 = 新しい画像();
img1.src = "http:/ /domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload; if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload() ;
}
func();
}
}
addLoadEvent(preloader);
方法 3: Ajax を使用してプリロードを実装する
上記の方法はあまりクールではないように思われるため、Ajax を使用して画像のプリロードを実装する方法を見てみましょう。この方法では、DOM を使用して画像をプリロードするだけでなく、CSS、JavaScript、その他の関連するものもプリロードします。 JavaScript を直接使用する場合よりも Ajax を使用する利点は、JavaScript と CSS の読み込みが現在のページに影響を与えないことです。この方法はシンプルで効率的です。
コードをコピー
コードは次のとおりです。 window.onload = function() { setTimeout (function() {
// JS と CSS をリクエストする XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain. tld/preload .js');
xhr.send('');
xhr = new XMLHttpRequest(); .css' );
xhr.send('');
// 画像をプリロード
new Image().src = "http://domain.tld/preload.png"; }, 1000 );
};
上記のコードは、「preload.js」、「preload.css」、「preload.png」をプリロードします。 1000 ミリ秒のタイムアウトは、スクリプトがハングして通常のページで機能上の問題が発生するのを防ぐためです。
次に、JavaScript を使用して読み込みプロセスを実装する方法を見てみましょう:
コードをコピーします
// 新しい CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet ";
css.href = "http://domain.tld/preload.css";
// 新しい JS
var js = document.createElement("script");
js .type = " text/javascript";
js.src = "http://domain.tld/preload.js";
// JS と CSS をプリロード
head.appendChild(css); 🎜>head.appendChild(js);
// プリロード画像
new Image().src = "http://domain.tld/preload.png", };
ここでは、DOM を介して 3 つの要素を作成し、3 つのファイルをプリロードします。上で述べたように、Ajax では、ファイルの読み込みは読み込みページには適用されません。この観点から見ると、Ajax メソッドは JavaScript よりも優れています。