CSS、JavaScript及びAjaxを利用して画像のプリロードを実現する三つの方法

6788 ワード

画像プリロード

画像をプリロードすることは、ユーザーの体験を向上させる良い方法である。画像をブラウザにロードしておけば、訪問者はスムーズにあなたのサイトでサーフィンをして、急速なロード速度を楽しむことができます。これはギャラリーと画像の比率が大きいウェブサイトにとって非常に有利です。画像が速く、シームレスに公開されることを保証しています。また、ユーザーがあなたのウェブサイトのコンテンツを閲覧する時により良いユーザー体験を得ることにも役立ちます。本論文は三つの異なるプリロード技術を共有し、ウェブサイトの性能と利用性を向上させる。
方法1：CSSとJavaScriptでプリロードを実現する
プリロードピクチャを実現するためには、CSS、JavaScript、および両者の様々な組合せを使用することを含む多くの方法がある。これらの技術は異なる設計シーンに基づいて対応する解決策を設計することができ、非常に効率的である。
単にCSSを使用すると、画像を容易かつ効率的にプリロードできます。コードは以下の通りです。


#preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }

この3つのIDセレクタを（X）HTML要素に適用すれば、CSSのbackground属性を通じて画面外の背景に画像をプリロードすることができます。これらの画像のパスが不変である限り、ブラウザはWebページの他の場所で起動されると、レンダリング中にプリローディング（キャッシュ）された画像を使用する。簡単で効率的で、JavaScriptは必要ありません。この方法は効率的であるが，改善の余地がある。この方法でロードした画像は、ページの他の内容と一緒にロードされ、ページ全体のロード時間が増加します。この問題を解決するために、私たちはいくつかのJavaScriptコードを追加し、ページのロードが完了するまで、プリロードの時間を遅らせます。コードは以下の通りです


function preloader() {
  if (document.getElementById) {
    document.getElementById("p1").style.background = "url(image-01.png) no-repeat";
    document.getElementById("p2").style.background = "url(image-02.png) no-repeat";
    document.getElementById("p3").style.background = "url(image-03.png) no-repeat";
  }
}
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);

スクリプトの第一部分では、クラスセレクタを使用する要素を取得し、background属性を設定して、異なる画像をプリロードします。
スクリプトの第二部分は、ページローディングが完了するまで、addLoadEvent()関数を使用して、preloader()関数のローディング時間を遅延させます。
JavaScriptがユーザのブラウザで正常に動作しないと、何が発生しますか？簡単です。画像はプリロードされません。ページで画像を呼び出したら、正常に表示すればいいです。
方法2：JavaScriptのみを使用してプリロードを実現する。
上記の方法は時には高効率であるが、実際に実現するには時間がかかりすぎることがわかってきた。逆に、純粋なJavaScriptを使って画像のプリロードを実現するのが好きです。以下では、現代のすべてのブラウザの上で美しく動作するプリロード方法を2つ提供します。
JavaScriptコードセグメント1


<div class="hidden">
  <script type="text/javascript">
    <!--//--><![CDATA[//><!--
      var images = new Array()
      function preload() {
        for (i = 0; i < preload.arguments.length; i++) {
          images[i] = new Image()
          images[i].src = preload.arguments[i]        }
      }
      preload(
        "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


<div class="hidden">
  <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>

この方法は上記の方法と同様であり、任意の数の画像をプリロードすることもできる。下のスクリプトを任意のWebページに追加し、プログラムコマンドに従って編集すればいいです。
見たように、画像をロードするごとに変数を作成する必要があります。「img 1=new Image()」、および画像ソースアドレスの声明は、「img 3 src="./path/to/image-033.gif」のようです。このモードを参照すると、必要に応じて任意の画像をロードすることができます。
私たちはまたこの方法を改善しました。このスクリプトを関数にパッケージし、ページローディングが完了するまでadd LoadEvent()を使用します。


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";
  }
}
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などの関連するものをプリロードする。Ajaxを使って、JavaScriptを直接使うよりも優れているところは、JavaScriptとCSSのローディングが現在のページに影響しないことです。この方法は簡潔で効率的である。


window.onload = function() {
  setTimeout(function() {
    // XHR to request a JS and 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() {
  setTimeout(function() {
    // reference to <head>
    var head = document.getElementsByTagName('head')[0];
    // a new CSS
    var css = document.createElement('link');
    css.type = "text/css";
    css.rel = "stylesheet";
    css.href = "http://domain.tld/preload.css";
    // a new JS
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = "http://domain.tld/preload.js";
    // preload JS and CSS
    head.appendChild(css);
    head.appendChild(js);
    // preload image
    new Image().src = "http://domain.tld/preload.png";
  }, 1000);
};

ここでは，DOMによって三つの要素を作成して，三つのファイルのプリロードを実現した。上に述べたように、Ajaxを使用すると、ロードファイルはロードページに適用されません。この点から見て、Ajax方法はJavaScriptより優れています。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。

c+++とc萶の時間変換例を共有する。

基本的な方法の役割を隠します。