画像のプリロードは、ユーザーエクスペリエンスを向上させる素晴らしい方法です。画像はブラウザにプリロードされており、訪問者はあなたのウェブサイトでスムーズにサーフィンし、非常に速い読み込み速度を楽しむことができます。これは、写真が大部分を占める画像ギャラリーやウェブサイトにとって非常に有益です。写真が迅速かつシームレスに公開されることを保証し、ウェブサイトのコンテンツを閲覧するときにユーザーエクスペリエンスをより良いユーザーエクスペリエンスを得るのにも役立ちます。この記事では、ウェブサイトのパフォーマンスと使いやすさを高めるために、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つの方法をすでに理解しています。どちらがより効率的ですか？友達もそれを見たと思うので、自分のプロジェクトに適用してください。