遅延ロードイメージを実装する方法

まず、遅延ロードは何ですか

デフォルトの画像を割り当てられた第一の画像srcが、ロードされたときに、ユーザーは、画像の表示領域にスクロールバーをスクロールしたときに、再び真の姿をたどります

ユーザーは、最初の画像にのみ関心であり、画像の残りの部分は、要求を保存することができた場合

第二に、なぜ遅延読み込みを導入すべきです

遅延ロード（LazyLoad）は、フロントエンドを最適化するための有効な方法である、大幅にユーザの利便性を高めます。絵は今、絵が数メガバイトを持っている、大規模な浮遊をロードするためのページとなっているコードのサイズよりもはるかに大きく、通常のものです。10枚の画像が取り組むAJAX要求は、10回の画像が出てロードされている場合、それは確かに無理があります。

関連する第三に、遅延ロードプロパティ

1、document.documentElement.clientHeight; //は、ブラウザの非常に目に見える領域を表します。

document.body.clientHeight //は、ページ全体のコンテンツの高さではなく、ブラウザの非常に目に見える領域です

2、document.documentElement.scrollTop; //スクロールバーがスクロールの高さです。

クロムはdocument.body.scrollTop //スクロールバーの高さにロールオーバー

だから、スクロールバーの高さを取得するには：トリックがあります：

　　VAR scrollTopスプライト= document.body.scrollTop || document.documentElement.scrollTop;

　　これらの2つの値は、常に一定でゼロになりますので、scrollTopスプライトの本当の原因への影響を心配しないでください。少しスキルが、非常に実用的。

3、offsetTop、offsetLeft

　　obj.offsetTop objが上位制御、整数ピクセル上の位置又は距離を指します。

　　obj.offsetLeft左OBJ距離又は上方制御、整数のピクセルを意味します。

　　obj.offsetWidthはOBJ幅制御自体、整数ピクセルを意味します。

　　obj.offsetHeight OBJ制御自体は、整数ピクセルの高さをいいます。

parentNodeは異なるoffsetParentの、offsetParentのは、この要素が絶対\相対\静的な要素や体である最新の位置と構造の階層に戻ります

ローリングに関与する特定の属性値は、参照してくださいhttps://blog.csdn.net/zh_rey/article/details/78967174 非常に詳細な

第四に、遅延ロードを実装

<！DOCTYPE HTML > 
< HTML のlang = "EN" > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < タイトル> Lazyload 2 </ タイトル> 
    < スタイル> 
    IMG { 
        表示：ブロック。
        マージン下：は50px ; 
        高さ：200pxの。
    } 
    </ スタイル> 
</ ヘッド> 
<
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 1.png" > 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 2.png" > 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 3.png" > 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 4.png" > 
    < IMG SRC = "画像/ローディング「.GIF データ-SRC "="画像/ 5.png > 
    <IMG SRC = "画像/ loading.gif" データ-SRC = "画像/ 6.png"> 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 7.png" > 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 8.png" > 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 9.png" > 
    < IMG SRC = "画像/ loading.gif" データSRC = "画像/ 10.png" > 
    < IMG SRC = "画像/ loading.gif」データ-SRC = "画像/ 11.png" > 
    <IMG SRC = "画像/ loading.gif" データ-SRC=「画像/ 12.png」> 
    

< スクリプト> 
    関数スロットル（FN、ディレイ、少なくとも）{ // スクロールイベントにバインドされた機能、ページスクロール機能がトリガー高周波を避けるためです、
        VARのタイムアウト=  nullを、/ / デバウンスは、プロセス
        のstartTime =  新しい新）（日付;
         戻り 関数（）{
           　　VARのCURTIME =  新しい新しい日付（）; 
        　　　　てclearTimeout（タイムアウト）; 
       　　　　 IF （CURTIME - のstartTime > = 少なくとも）{ 
        　　    のFn（）; 
           　　 のstartTime = CURTIME。
        　　　　}他の{ 
           　　　　 タイムアウト= setTimeoutメソッド（FN、ディレイ）; 
        　　　　} 
        } 
    } 
    関数lazyload（）{
         VARのイメージ= document.getElementsByTagName（' IMG ' ）;
         VAR LEN     = images.length;
         VAR N-       =  0 ;       // にロード店の写真位置からたびに最初のピクチャを横断避けるために         
        リターン 機能）（{
        　　　　VAR seeHeight = document.documentElement.clientHeight;
       　　　　 VAR scrollTopスプライト= document.documentElement.scrollTop || document.body.scrollTop;
     　　　　   用（VAR I = N; iは< LEN; iが++ ）{
           　　　　  場合（画像[I] .offsetTop < seeHeight + scrollTopスプライト）{
               　　　　  場合（画像[I] .getAttribute（' SRC ' ）===  ' イメージ/ロードを.GIF ' ）{ 
               　　　　　　  画像[I] .SRC = 画像[I] .getAttribute（' データSRC '）。 
               　　　　 } 
           　　　　　　 N- = N- +  1 ; 
            　　　　} 
        　　　　} 
        } 
    } 
    VAR LoadImages = lazyload（）; 
    LoadImages（）;           //は、ホーム・ページ画像初期化


    window.addEventListener（' スクロール' 、スロットル（LoadImages、500 、1000 ）、falseに） ;
　　// 関数のスロットル（絞り）とデバウンス機能（デバウンス）プロセス、
// 500ミリ秒の遅延と1000msの間隔、それは機能がトリガされていない1000ミリ秒を超える場合、機能はすぐに実行される、または関数500ミリ秒の実行を遅延
    </ スクリプト> 
</ボディ> 
</ HTML >

参考記事：

https://www.cnblogs.com/rlann/p/7296660.html

https://blog.csdn.net/xiongzhengxiang/article/details/7551598

https://blog.csdn.net/zh_rey/article/details/78967174

遅延ロードイメージを実装する方法

おすすめ