実装の遅延ロード

（なぜ、遅延ロードを使用）遅延ロードを意味

ページの読み込み速度への影響が最も大きい絵で、一般的な絵は、数Mの大きさに到達することができ、およびコードは、おそらくわずか数十KBです。数クロックSページ内のページの読み込み速度をたくさんの写真、ゆっくりとページがロードされていないときは、ユーザーの多くが失われる可能性があります。あまりにも多くのページの読み込み時間を短縮するために、ページの絵、非常に多くの時間のために私たちは、絵が最初にロードされていないページ内の可視領域に表示され、その後、負荷への表示領域にスクロールするまで待たないようにする必要があります。この方法のために大幅にページロードのパフォーマンスを改善するだけでなく、ユーザーの利便性を向上させることになります。

レイジーローディングは、定義により、現在のWebページでは、絵を見ることができるようにページをスライドさせたときに、画像のリロード

したがって、問題を2つに分割さ：

（どのように我々は写真を見て判断することができ、ある）現在のビューポート内の画像が表示されますを確認する方法
画像の読み込みを制御する方法

＃オプションの一つ

比較のために絵の現在のビューポートのclientTop、offsetTop、clientHeightとscrollTopスプライト様々な高さで画像が表示されますを確認する方法

これらは、これはどういう意味の非常に代表されますか？

私はその後、私はサイケのように、よりシンプルです、それが可能である知るために使用されています。私は今考え出したが、当時の事は気をつけてください

だから、問題があります理解し、複雑な些細な困難！

ちょうどそれの静的高さが十分でないことを知って、我々はまたのダイナミクスを知っておく必要があります

どのように動的に？window.scrollイベントをリッスン

画像の読み込みを制御する方法

<データ-IMG SRC =「shanyue.jpg」>
 // 注：画像の幅と高さを指定するには

代わりに、負荷制御を一時データ-srcの設定SRCデータ-src属性を使用しての

＃オプションII

それを改善するために上記のプログラム

新しいビューポートの導入APIの現在の画像が表示されますを決定する方法、 Element.getBoundingClientRect（）メソッドは、ビューポートに要素のサイズと位置を返します。

どのように絵が、概略的な例によれば、次のコードは、これが理解しやすくなり、現在のビューポートに表示されていることを決定し、そして背面に簡単に（あなたが幸せに面接に行くことができます）することができます。

// clientHeight現在のビューポートの高度代表 
img.getBoundingClientRect（）。トップ<document.documentElement.clientHeight

また、それを最適化window.scrollイベントをリッスン

パフォーマンスを向上させるために、スロットルを追加します。ああlodash、それに全能を一般的に使用さlodash.throttleを働きます！

_.throttle（FUNC、[ウェイト= 0]、[オプション= {}]）

＃オプションIII

そして、それを改善

どのように現在のビューポートのプログラムで画像が表示されますを決定するために使用する2つの方法がある：window.scroll Element.getBoundingClientRectを（リスニング）とスロットル_.throttleを使用

：トリプルイベントのうち、ブラウザよう組み合わせたアクションのシリーズは、あまりにも、複雑 IntersectionObserverの APIは、イベントへの現在のビューポート要素かどうかを監視することができ、一歩中！

イベントコールバックパラメータは、可視ビューポートの値の範囲を代表しているかどうか、IntersectionObserverEntryコレクションです

これは、entry.isIntersectingが表すターゲット要素が表示されています

CONSTオブザーバ= 新しい IntersectionObserver（（変更）=> {
   // 変更：目标元素集合 
  changes.forEach（（変化）=> {
     // intersectionRatio 
    場合（change.isIntersecting）{ 
      CONST IMG = change.target 
      img.src = IMG .dataset.srcの
      observer.unobserve（IMG）
    } 
  }）
}）

observer.observe（IMG）
 <スクリプト>
     VAR NUM = document.getElementsByTagName（ 'IMG' ）.LENGTH。
    VAR IMG = document.getElementsByTagName（ "IMG" ）;
    VAR N = 0; //店の写真は、第1の画像からすべての横断を避け、位置にロードされ

    ;）（lazyload // 領域にページがロードされているが、完成積載写真

    window.onscroll = lazyload; 

    関数 lazyload（）{ //は、ページのスクロールに聞きますイベント
        VAR seeHeight = document.documentElement.clientHeight; // 高さの表示領域
        VAR scrollTopスプライト= document.documentElement.scrollTop || document.body.scrollTop; // 上からスクロールバーの高さ
        のために（VAR I = N-; I <NUM; I ++ ）{
             IF（IMG [I] .offsetTop <+ seeHeight scrollTopスプライト）{
                 IF（IMG [I] .getAttribute（ "SRC"）== "default.jpg" ）{
                    IMG [I] .SRC= IMG [I] .getAttribute（ "データSRC" ）。
                } 
                N = I + 1 。
            } 
        } 
    }
 </ SCRIPT>

またはjqueryのを使用して

<スクリプト>
     VARのn = 0 、
        imgNum = $（ "IMG" ）.LENGTH、
        IMG = $（ 'IMG' ）; 

    lazyload（）; 

    $（ウィンドウ）.scroll（lazyload）。

    関数lazyload（イベント）{
         ため（VAR iがN =、I <imgNum; I ++ ）{
             場合（img.eq（I）.offset（）トップ<のparseInt（$（ウィンドウ）.height（））+。のparseInt（$ （ウィンドウ）.scrollTop（）））{
                 場合（img.eq（I）.ATTR（ "SRC"）== "default.jpg" ）{
                     VAR SRC = img.eq（I）.ATTR（「データSRC " ）; 
                    img.eq（I）。、SRC）; 

                    N iが1 + = 。
                } 
            } 
        } 
    }
 </ SCRIPT>

スロットル機能のパフォーマンスの最適化の使用

機能を直接スクロールイベントにバインドされている場合は、ページがスクロールされたとき、この関数は、ブラウザのパフォーマンスに影響を及ぼしている高周波を、トリガされます。

私は最適化のパフォーマンスへのトリガ限界周波数を達成したいです。

スロットル機能：関数はN秒に一回だけ実行されます。ここでは、単純なスロットリング機能は次のとおりです。

// スロットルの簡単な関数
 // 関数funに実行する
 // 遅延遅延
 // 時間は、期間内で実行されなければならない
機能スロットル（楽しい、ディレイ、時間）{
     VARのタイムアウト、
        のstartTime = 新しい新しい; A日付（）

    の戻り機能を（）{
         VARのコンテキスト= この、
            引数 = 引数は、
            CURTIME = 新しい新A日付（）; 

        てclearTimeout（タイムアウト）; 
        // トリガが所定時間に達した場合、ハンドラトリガ
        IF（CURTIME -のstartTime> = 時間）{ 
            fun.applyを（コンテキスト、引数）。
            startTimeの =CURTIME;
             //は、トリガ間隔に到達しなかったタイマーをリセットする 
        } 他{ 
            タイムアウト = setTimeoutメソッド（楽しい、ディレイ）; 
        } 
    ;} 
}; 
//は、実際にスクロールイベントハンドラにバインドする 
関数lazyload（イベント）{
         のために（VAR I = N-; I <imgNum; I ++ ）{
             IF。（img.eq（I）.offset（）トップ<のparseInt（$（ウィンドウ）.height（））+ のparseInt（$（ウィンドウ）.scrollTop（） ））{
                 IF（img.eq（I）.ATTR（" SRC "）== " default.jpg" ）{
                     Varの SRC = img.eq（I）.ATTR（" DATA-SRC " ）; 
                    img.eq（I）.ATTR（" SRC 」、SRC）; 

                    N- = I + 1 ; 
                } 
            } 
        } 
    } 
// 絞り機能を使用 
window.addEventListener（' スクロール'、スロットル（lazyload、500、1000））。

（なぜ、遅延ロードを使用）遅延ロードを意味

＃オプションの一つ

＃オプションII

＃オプションIII

おすすめ