画像の不活性なロードを教えます.

画像のアイドリングDEMOアドレス->画像のアイドリング(Githubに置いたので、遅くなるかもしれません.chromeを使った方がいいです.)
不活性負荷について
画像のアイドリングを話す前に、惰性負荷について話しましょう.不活性負荷は遅延負荷、怠惰負荷などとも言われています.英語では「lazyload」という名前があります.注意したいのは、惰性ローディングは写真の特許だけではなく、Javascriptにも不活性ローディングの概念があります.(詳細は高性能JavaScriptプログラミングの実践を参照してください.「作業を繰り返さないでください」という一節があります.)、Javascriptの非同期ローディングにはLazyLoadの種類があります.概念を混同させないようにする.
画像の不活性ロードとはどういう意味ですか?なぜそれを使いますか?私達のページの上のものがますます豊富になる時、私達はページのロード速度がますます遅くなることを発見して、ピクチャーのロード量は間違いなくHTTPの要求の中の主要な部分です.実際には、多くの場合、ページ全体をロードしても、ユーザーは一番下にスライドしません.つまり、多くのものが無駄にロードされています.画像のロードがプリクラなので、先に写真を持って手術します.もしHTMLページをロードしようとしたら、画像は先にロードしないで、ユーザーがページを下にスライドさせて、画像が視認エリアに現れたら、この画像をロードします.そうすると、ページを開くHTTP要求量を下げることができます.これは写真の不活性負荷です.
実現する
画像のアイドリングの実現方法はとても簡単です.

HTMLファイルで不活性性負荷が必要なピクチャのsrc属性は同じアドレス(一般的にはloading図に設定されています)に設定されています.この図は一回だけロードされます.あるいは単に空にして、本当のピクチャアドレスを他の属性に記憶します.

傍受イベント(例えば、scrollイベント)は、不活性負荷が必要なピクチャがすでに視認領域にあるかどうかを判断し、そうであれば、src属性をdata-origginnal属性値

に置き換える.
次にコードを簡単に書きます.
まず、実際の画像アドレスをdata-originalのプロパティに隠します.ここでは、すべての画像を不活性にロードすると仮定しています.実際の開発では、第一画面の画像に間違いがないなら、そのsrcは直接に本当の住所を指すことができます.

<ul>
  <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>

すべての画像を不活性ロードモードに設定していますが、最初の画面の画像は直接表示する必要があります.ここではinit()関数を書いています.コメントはすべてコードの中にあります.

function init() {
  var images = document.images;
  //       
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    //                
    if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      //     HTML5   
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    } else {  //         HTML               
      break;
    }
  }
}

コードにはimage Loaded()関数が書いてあります.実際の画像アドレスを要素に指します.直接data-original属性の値を画像のsrc属性に向けると、見た画像は一段現れますが、先に画像を完全にロードしてから画像を現像させると、体験がたくさんできます.

function imageLoaded(obj, src) {
  var img = new Image();
  img.onload = function() {
    obj.src = src;
  };
  img.src = src;
}

OKです.続いて、私たちはscrollイベントを監督します.ユーザーがスライドして画面が表示されたら、画像をロードします.

window.onscroll = function() {
  lazyload();
};

function lazyload() {
  var lazy = 0;
  var images = document.images;
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    }
  }
}

ある時は画像がちょうど視認エリアにある時にロードできなくて、少し「プリロード」して、lazyload()関数の中のlazyパラメータを調整することができます.
画像体験があまり良くないということを「ぎこちない」と表示すれば、フェードアウト効果も得られます.具体的には言いません.完全コードGithubを見ることができます.
このように、簡単な画像を不活性にDEMOにロードして完成しました.
PS:惰性ローディングは利点が多いですが、「致命的ではない」という欠点があります.SEOに影響を与えます.偽物の写真に置き換えられていますので、写真の収録に影響を与えます.この機能は詳細ページでの使用を推奨しません.