画像のプリロードは、ユーザーエクスペリエンスを向上させる素晴らしい方法です。画像はブラウザにプリロードされており、訪問者はあなたのウェブサイトでスムーズにサーフィンし、非常に速い読み込み速度を楽しむことができます。これは、写真が大部分を占める画像ギャラリーやウェブサイトにとって非常に有益です。写真が迅速かつシームレスに公開されることを保証し、ウェブサイトのコンテンツを閲覧するときにユーザーエクスペリエンスをより良いユーザーエクスペリエンスを得るのにも役立ちます。この記事では、ウェブサイトのパフォーマンスと使いやすさを高めるために、3つの異なるプリロードテクノロジーを共有します。
方法1:CSSとJavaScriptを使用して、プリロードを実装します
CSS、JavaScript、および2つのさまざまな組み合わせを使用するなど、プリロード画像を実装するには多くの方法があります。これらのテクノロジーは、非常に効率的なさまざまな設計シナリオに従って、対応するソリューションを設計できます。
CSSだけを使用すると、簡単かつ効率的に画像をプリロードできます。コードは次のとおりです。
コードコピーは次のとおりです。
#preload-01 {background:url(http://domain.tld/image-01.png)no-repeat -9999px -9999px; }
#preload-02 {background:url(http://domain.tld/image-02.png)no-repeat -9999px -9999px; }
#preload-03 {background:url(http://domain.tld/image-03.png)no-repeat -9999px -9999px; }
これら3つのIDセレクターを(x)HTML要素に適用することにより、CSSの背景プロパティを介して画面外の背景に画像をプリロードできます。これらの画像のパスが同じままである限り、ブラウザは、Webページの他の場所で呼び出されるときにレンダリング中にプリロード(キャッシュ)画像を使用します。シンプルで効率的で、JavaScriptは必要ありません。
この方法は効率的ですが、改善の余地があります。このメソッドを使用してロードされた写真は、ページの他のコンテンツと一緒にロードされ、ページの全体的な読み込み時間が増加します。この問題を解決するために、ページがロードされるまでプリロード時間を遅らせるためにJavaScriptコードをいくつか追加しました。コードは次のとおりです。
コードコピーは次のとおりです。
// @ <aをプリロードするより良い画像href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> perishablepress.com {
if(document.getElementById){
document.getElementById( "Preload-01")
document.getElementById( "Preload-02")。style.background = "url(http://domain.tld/image-02.png)no-repeat -9999px -9999px";
document.getElementById( "Preload-03")。style.background = "url(http://domain.tld/image-03.png)no-repeat -9999px -9999px";
}
}
関数addloadevent(func){
var oldonload = window.onload;
if(typeof windof.onload!= 'function'){
window.onload = func;
} それ以外 {
window.onload = function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addloadevent(preloader);
スクリプトの最初の部分では、クラスセレクターを使用して要素を使用し、バックグラウンドプロパティを設定して、さまざまな画像をプリロードします。
このスクリプトの2番目の部分では、AddLoadeVent()関数を使用して、Plaloader()関数の読み込み時間を遅らせます。
JavaScriptがユーザーのブラウザで適切に機能しない場合はどうなりますか?とても簡単です。画像はプリロードされません。ページが画像を呼び出すと、正常に表示されます。
方法2:JavaScriptのみを使用してプリロードを実装します
上記の方法は非常に効率的な場合がありますが、実際の実装には時間がかかりすぎることが徐々にわかります。代わりに、純粋なJavaScriptを使用して画像をプリロードすることを好みます。このような2つのプリロード方法を以下に示します。これは、すべての最新のブラウザで美しく機能する可能性があります。
JavaScriptコードセグメント1
必要な画像のパスと名前を編集してロードするだけで、実装するのは簡単です。
コードコピーは次のとおりです。
<div>
<script type = "text/javascript">
<! - //-> <![cdata [//> <! - var images = new Array()
function preload(){
for(i = 0; i <preload.arguments.length; i ++){
画像[i] = new Image()
画像[i] .src = preload.arguments [i]
}
}
プリロード(
"http://domain.tld/gallery/image-001.jpg"、
"http://domain.tld/gallery/image-002.jpg"、
「http://domain.tld/gallery/image-003.jpg」
))
// - > <!]]> </script>
</div>
この方法は、多数の画像をプリロードするのに特に適しています。私のギャラリーのウェブサイトはこのテクノロジーを使用しており、50を超えるプリロードされた画像があります。スクリプトをログインページに適用し、ユーザーがログインアカウントを入力する限り、ほとんどのギャラリーの写真がプリロードされます。
JavaScriptスニペット2
この方法は上記の方法に似ており、任意の数の写真をプリロードすることもできます。次のスクリプトを任意のWebページに追加し、プログラムの指示に従って編集します。
コードコピーは次のとおりです。
<div>
<script type = "text/javascript">
<! - //-> <![cdata [///> <! - if(document.images){
IMG1 = new Image();
IMG2 = new Image();
IMG3 = new Image();
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";
}
// - > <!]]> </script>
</div>
ご覧のとおり、各画像の読み込みには、「IMG1 = new Image();」などの変数を作成する必要があります。 「img3.src =などの画像ソースアドレス宣言
"../path/to/image-003.gif"; "。このモードを参照してください。必要な数の写真をロードできます。
この方法は再び改善しました。スクリプトを関数にカプセル化し、addloadevent()を使用して、ページが読み込まれるまでプリロード時間を遅延させます。
コードコピーは次のとおりです。
function preloader(){
if(document.images){
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
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";
}
}
関数addloadevent(func){
var oldonload = window.onload;
if(typeof windof.onload!= 'function'){
window.onload = func;
} それ以外 {
window.onload = function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addloadevent(preloader);
方法3:AJAXを使用して、プリロードを実装します
上記の方法は十分にクールではないように思われるため、Ajaxを使用して画像のプリロードを実装する方法を見てみましょう。この方法では、画像をプリロードするだけでなく、CSS、JavaScript、その他の関連するものをプリロードするDOMを使用します。 Ajaxの使用はJavaScriptを直接使用するよりも優れています。利点は、JavaScriptとCSSの負荷が現在のページに影響しないことです。この方法はシンプルで効率的です。
コードコピーは次のとおりです。
window.onload = function(){
setimeout(function(){
// xhr jsとa css var xhr = new xmlhttprequest()を要求する;
xhr.open( 'get'、 'http://domain.tld/preload.js');
xhr.send( '');
xhr = new xmlhttprequest();
xhr.open( 'get'、 'http://domain.tld/preload.css');
xhr.send( '');
// preload image new image()。src = "http://domain.tld/preload.png";
}、1000);
};
上記のコードには、「Preload.js」、「Preload.css」、および「preload.png」がプリロードされています。 1000ミリ秒のタイムアウトは、スクリプトがぶら下がっていないため、通常のページに機能的な問題を引き起こすことです。
以下では、JavaScriptを使用して読み込みプロセスを実装する方法を見てみましょう。
コードコピーは次のとおりです。
window.onload = function(){
setimeout(function(){
// <head>への参照
var head = document.getElementsByTagname( 'head')[0];
//新しい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)のPreload;
head.AppendChild(JS);
//プリロード画像
new Image()。src = "http://domain.tld/preload.png";
}、1000);
};
ここでは、3つのファイルのプリロードを実装するために、DOMを介して3つの要素を作成します。上記のように、Ajaxを使用すると、読み込みファイルは読み込みページに適用されません。この観点から、AjaxメソッドはJavaScriptよりも優れています。
さて、この記事はここに紹介されます。誰もが、画像プリロードテクノロジーを実装する3つの方法をすでに理解しています。どちらがより効率的ですか?友達もそれを見たと思うので、自分のプロジェクトに適用してください。