検索

ホームページ  >  記事  >  php教程  >  CSS、JavaScript、Ajax を使用して画像のプリロードを実装する方法

CSS、JavaScript、Ajax を使用して画像のプリロードを実装する方法

高洛峰
高洛峰オリジナル
2016-12-03 15:45:011442ブラウズ

画像のプリロードは、ユーザーエクスペリエンスを向上させる優れた方法です。ブラウザに画像が事前に読み込まれているため、訪問者はスムーズにサイトを閲覧し、驚くほど速い読み込み時間を楽しむことができます。これは、画像が大きな割合を占める画像ギャラリーや Web サイトにとって非常に有益です。これにより、画像が迅速かつシームレスに公開され、Web サイトのコンテンツを閲覧する際のユーザー エクスペリエンスが向上します。この記事では、Web サイトのパフォーマンスと使いやすさを向上させるための 3 つの異なるプリロード手法を紹介します。

画像のプリロードを実装するには、css、JavaScript、Ajax の 3 つの方法を使用できます。これらのメソッドの実装を以下に紹介します。

CSS を使用する

CSS を使用して画像をページ要素の背景にロードするだけです。このメソッドはシンプルで効率的です: 

#div1{background:url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }
#div2{background:url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }

他の場所で呼び出された場合、パスが一貫している限り、ブラウザはプリロードを使用します。レンダリング中の（キャッシュされた）イメージ。シンプルかつ効率的で、JavaScript は必要ありません。

欠点: この方法を使用すると、ページの読み込みと同時に画像が読み込まれるため、ページの読み込み時間が長くなります。完了を支援するために JavaScript を使用する方が効率的です。

CSSとJavaScriptを組み合わせて使用​​します

functionpreload(){
if(document.getElementById) {
document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";
document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";
}
}
functionaddLoadEvent(func){
varoldonload =window.onload;
if(typeofwindow.onload !='function') {
window.onload = func;
} else{
window.onload =function(){
if(oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preload);

画像の読み込みをページの読み込み後に設定しているため、画像とページの同時読み込みによるアクセス時間の延長を心配する必要はありません。

JavaScript の実行が失敗しても、画像のプリロードが失敗するだけなので、心配する必要はありません。画像が呼び出されると、正常に表示されます。

JavaScript を使用して実装する

方法 1

varimages =newArray()
functionpreload(){
for(i =0; i < preload.arguments.length; i++) {
images[i] = newImage()
images[i].src = preload.arguments[i]
}
}
preload(
"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg",
"http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg"
)

方法 2

このメソッドは、実際には方法 1 と同じ原理を持ちますが、配列で実装されず、画像オブジェクト。 

if(document.images) {
img1 = newImage();
img2 = newImage();
img3 = newImage();
img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
}

Ajax の使用

上記のすべての方法が十分に優れていないと仮定すると、別の方法があります。それは、Ajax を使用して画像をプリロードすることです。 DOM を使用してプリロードを実装すると、画像、CSS、JavaScript など、その他のものをロードできます。 JavaScript を直接使用する場合と比較して、Ajax を使用する利点は、現在のページに影響を与えることなく CSS と JavaScript をプリロードできることです。これは画像にとって実際には問題ではありませんが、それでも、この方法は非常にシンプルで効率的です: 

window.onload =function(){
setTimeout(function(){
// XHR to request a JS and a CSS
varxhr =newXMLHttpRequest();
xhr.open(&#39;GET&#39;,&#39;http://domain.tld/preload.js&#39;);
xhr.send(&#39;&#39;);
xhr = newXMLHttpRequest();
xhr.open(&#39;GET&#39;,&#39;http://domain.tld/preload.css&#39;);
xhr.send(&#39;&#39;);
// preload image
newImage().src ="http://domain.tld/preload.png";
}, 1000);
};

このように、このコードは 3 つのファイルをプリロードします: preload.js、preload.css、preload .png 。 1 秒の遅延を設定するのは、主に JavaScript ファイルの読み込みによって通常のページで機能上の問題が発生するのを防ぐためです。

これをカプセル化するには、ネイティブ JavaScript を使用してこのコードを記述する方法を見てみましょう: 

window.onload =function(){
setTimeout(function(){
// reference to <head>
varhead =document.getElementsByTagName(&#39;head&#39;)[0];
// a new CSS
varcss =document.createElement(&#39;link&#39;);
css.type = &#39;text/css&#39;;
css.rel = &#39;stylesheet&#39;;
css.href = &#39;http://domain.tld/preload.css&#39;;
// a new JS
varjs =document.createElement(&#39;script&#39;);
js.type = &#39;text/javascript&#39;;
js.src = &#39;http://domain.tld/preload.js&#39;;
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
newImage().src =&#39;http://domain.tld/preload.png&#39;;
}, 1000);
};

ここでは、DOM を介して 3 つの要素を作成し、ページに 3 つのファイルをプリロードしました。元の記事で述べたように、このアプローチは Ajax にはあまり適していません。プリロードされたファイルのコンテンツを読み込みページに追加しないでください。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Bootstrap Table の使用経験の概要次の記事：Bootstrap Table の使用経験の概要

関連記事

続きを見る