[JavaScriptの純粋なJSは、（ソースコード）遅延読み込み遅延の複数の画像を得ます

効果は、以下に示されています

 

効果上記の図は、以下の要件の効果

        1、ロードされていない画像、デフォルトの表示負荷絵の背景

        2は、単に自動的に画像の最初の画面をロードし、ページを入力し始めています

        図3に示すように、プルダウン・インターフェース、容器が完全に画像スクリーンを明らかにされた場合、画像は、直ちにロードされる置換背景

        画像をロードするとき4、プログレッシブ表示画像効果があります

 

 

第二に、難しさ

        1）どのようにAjaxリクエストデータ

        2）どのように動的にHTMLにJSONデータをバインドします。

        3）どのように画像の位置を計算するために、画像は、遅延ローディング機構をトリガ

        4）ボーナスアイテム、映像を表示する段階的な遷移アニメーションが今そこにあります

 

 

第三に、事前知識

        1）アヤックス関連の知識、XMLHttpRequestオブジェクト、すべての最新ブラウザでは、このオブジェクトをサポートしています。

        2）innerHTMLの、結合データ、ステッチ列

        3）HTML DOMのgetAttribute（）メソッドは、カスタムプロパティの属性名の値を返します（属性値は、主に）カスタムプロパティを返すために使用されます

        4）onloadイベントの写真ときに正しい画像の属性値のsrc属性（すなわち、画像のonloadイベントをトリガするために、正常に）画像をロードすることが可能です

 

 

1つのブレークによって第四に、難しさの1

        1）どのようにAjaxリクエストデータ

        4つのステップ

// 1）まず、Ajaxオブジェクトの作成
VAR =新しい新しいXHRのXMLHttpRequestを; 
// 2）私たちは要求されたデータに対処する必要があるファイルを開き
、バック// URLアドレスをプラス乱数：（リクエストを取得）が生成されるクリアするたびにデータ要求をキャッシュは、
各訪問のアドレスが異なるため、//、ブラウザの種類は、サーバーからの応答がデータのローカルキャッシュを読み込んでキャッシュしようとしません。
xhr.open（ '取得' 'JSON / newsList.txt？' +、偽Math.random（））; // falseを代表して、同期
 3 @）を聞く要求状態
xhr.onreadystatechange =関数（）{ 
    IF（XHR === 4 && /^2\d{2}$/.test(xhr.status .readyState））{ 
        VAR =ヴァルxhr.responseText; 
        jsonData utils.jsonParse =（ヴァル）; 
    } 
} 
// 4）要求を送信します
xhr.send（NULL）。

 

        2）どのように動的にHTMLにJSONデータをバインドします。

        文字列連結方法（最も一般的に使用されるデータは、モード結合）、すなわち、使用してinnerHTMLのを、ページ要素の文字列の連結、そして次に再レンダリングページ

VAR STR = ""; 
IF（jsonData）{ 
    ため（VAR I = 0、LEN = jsonData.length; iがLEN <; iは++）{ 
        VAR curData = jsonData [I]。
        STR + = '<LI>'; 
        STR + = 'の<div> <IMG SRC = "" trueImg = "' + curData [ "IMG"] + '"> </ div>'; 
        STR + = 'の<div> <H2>' + curData [ "タイトル"] + '</ H2>'; 
        STR + = '<P>' + curData [ "DESC"] + '</ P>'; 
        STR + = '</ div>'; 
        STR + = '</ LI> </ div>'; 
    } 
    news.innerHTML + = STR。
}    

        長所：最も一般的な方法は、データバインディング、ブラウザは一度しかレンダリングする必要があるため、（すべてのテンプレートデータバインディングエンジンの原理である文字列の連結、VUE、角、ヒスイ、kTemplate.jsなど）
                   、最終的に良いコンテンツをステッチ、そして前にページに追加統一、唯一のリフローをトリガー

        短所：私たちは3つの李の効果以上のオリジナルのマウスは（オリジナルラベルバインディングのイベントがなくなっている）姿を消した、と＃のUL1に新しい文字列を追加し
                   、オリジナル、オリジナルのoUl.innerHTML役割を物事対応するイベントは、何も、その後結合、および文字列連結を持っていないときに、もともとラベルとして、文字列をフェッチするラベル方式
                   スプライシング、または文字列の完了後に、しかし！そして最後に、統一がページに文字列を追加し、ブラウザは、文字列に対応するラベルをレンダリングする必要が

 

        3）どのように画像の位置を計算するために、画像は怠惰なローディング機構（トリガ最も重要な点）

        アイデア：

                ：画面の画像の上部からの距離を表し 

//オフセット方法はutilsのツールにここで使用される、以下のソースコードが具現参照
VAR A = utils.offset（curImgPar）.offsetTop + curImgPar.offsetHeight。

                B：+距離から画面をスクロールするスクロールバーを表します。

ここで使用される方法//勝利utilsのツールクラス、以下のソースコードが具現参照
するvar B = utils.win（ "clientHeight" ）+ utils.win（ "scrollTopスプライトを"）;

                場合<Bの画像のデフォルト遅延ロードは、その場合の時間、そのまま表示される、この時間遅延ロード画像をトリガするために必要に

 

        イメージをロードする場合4）、表示画像はプログレッシブ効果を有します

        アイデア、透明特性（curImg.style.opacity）によって現在のピクチャの方法を用いてwindow.setIntervalは、0に透明な透明度から500ミリ秒までの合計時間を開始します

// - >効果を達成フェード
機能フェードイン（curImg）{ 
    VAR時間= 500、//総時間
    間隔= 10、// 10msのは取る
    目標= 1; //が総距離である1つの。
    VARステップ=（目標/ DURATION） *間隔; //ステップの各ステップ
    VARタイマ= window.setInterval（関数（）{ 
        VAR curOp = utils.getCss2SS（curImg、 "不透明度"）
        。IF（curOp> = 1）{ 
            。curImg.style.opacity 1 = ; 
            window.clearInterval（タイマ）; 
            戻り
        } 
        curOp + = STEP; 
        curImg.style.opacity = curOp; 
    }、間隔ザ）; 
}

　

 

ファイブ完全なコード

        1）main.htmlと

            国境：なし; 
        } 
        .news {
            パディング：10pxのは; 
        まず-IMG {子LI> DIVを.news
        } 
        .Newsリー{ 
            位置：相対; 
            高さ：60PX; 
            パディング：0 10pxの、
            境界底：; 1ピクセル固体#eeeは
        } 
        ：はるかに、サブDIV後の最初-子供{/ *意味し、李は> DIV .news最初の* / 
            位置：絶対; 
            トップ：10pxの; 
            左：0; 
            幅：75px; 
            高さ：60PX; 
            背景：URL（ "./ IMG / loading.PNG"）センターセンターNO-REPEAT＃e1e1e1、
            バックグラウンドサイズ：100％100％; 
        } 
        / *モバイル装置の端部は、最も外側の容器が高く広い* /設定されていない

            ディスプレイ：なし; 
            幅：100％; 
            高さ：100％。 
            不透明度：0; / *設定の目的ここでは、進歩的な効果を達成するために、0にされ、フェードインバック機能、役割は*透明画像は0から1にあるようにすることです/ 
        } 

        .news LI> DIV：テラス、N番目（2）{ 
            高さ：60PX; 
            マージン左：80pxの; 
        } 
        リチウムを.news> DIV：テラス、N番目（2）H2 { 
            高さ：20ピクセル、
            行の高さ：20ピクセル。
            / *テキストは、自動切断線* /達成超えて
            オーバーフロー：隠された、
            テキストオーバーフロー：省略記号; / * * /過剰楕円を表示
            空白：NOWRAP; / *必須ではないラップ* / 
        } 
        LI> DIV .news：N番目の-child（2）P { 
            行の高さ：20ピクセル。
            -sizeフォント：12ピクセル; 
            色:;＃616161 
        } 
    </スタイル> 
    VARニュース=のdocument.getElementById（"ニュース"）、 
</ HEAD> 
<BODY>
    <ulの上記のid = "ニュース"クラス= "ニュース"> 
        <！ - <LI> - > 
            <！ -の<div> - > 
                <！ - <IMG SRC = "./ IMG / new1.PNG" = ALT ""> - > 
            <！ - </ DIV> - > 
            <！ -の<div> - > 
                <！ - <H2>過去の香港の伝説、香港で過去4人の家族、香港セー大家族の思い出</ H2> - > 
                -香港4つのファミリー過去<< P>：！香港李嘉誠は、4つのファミリーを過ぎ鄭ゆう桐油福陵です：李嘉誠は、鄭ゆう桐油福陵</ p型>です- > 
            <！ - </ DIV> - > 
        <！ - </ LI> - > 
    </ UL> 




タイプ= "テキスト/ JavaScriptを" SRC =の<スクリプト"./ツール/ utils.js"> </ SCRIPT> 
<スクリプトタイプの= "テキスト/ javascriptの">
        = news.getElementsByTagName imgList（ "IMG"）; 

    // 1、（Ajaxを介して）結合されるデータを取得するために
    VAR jsonData = NULL; 
    〜関数（）{ 
        // 1）Ajaxオブジェクトを作成します。 
        VAR =新しい新しいXHRのXMLHttpRequest; 
        // 2）私たちは要求されたデータに対処する必要があるファイルを開き
        、バック// URLアドレスをプラス乱数：クリアするたびにデータ要求（リクエストを取得します）キャッシュを生成し
        、各訪問のアドレスが異なっているため、サーバーはデータのローカルキャッシュを読み込んでから、ブラウザの種類が応答をキャッシュしようとしません//。
        xhr.open（ '取得' 'JSON / newsList.txt？' +、偽Math.random（））; // falseを代表して、同期
        3 @）を聞く要求状態
        xhr.onreadystatechange =関数（）{ 
            IF（XHR === 4 && /^2\d{2}$/.test(xhr.status .readyState））{ 
                VAR =ヴァルxhr.responseText; 
                jsonData utils.jsonParse =（ヴァル）; 
            } 
        } 
        // 4）要求を送信します
        xhr.send（NULL）; 
    }（）;
    console.log（jsonData）。

    // 2、数据绑定（使用字符串拼接的方式）
    〜関数（）{ 
        VAR STR = ""; 
        IF（jsonData）{ 
            ため（VAR I = 0、LEN = jsonData.length; iがLEN <; iは++）{ 
                VAR curData = jsonData [I]。
                STR + = '<LI>'; 
                STR + = 'の<div> <IMG SRC = "" trueImg = "' + curData [ "IMG"] + '"> </ div>'; 
                STR + = 'の<div> <H2>' + curData [ "タイトル"] + '</ H2>'; 
                STR + = '<P>' + curData [ "DESC"] + '</ P>'; 
                STR + = '</ div>'; 
                STR + =「<

        = curImg.getAttribute oImg.src（ "trueImg"）; 
        oImg.onload =関数（）{ 
            curImg.src = this.src; 
            curImg.style.display = "ブロック"、
            フェードイン（curImg）; 
            oImg = NULL; 
        } 
        curImg =真.isLoadに; 
    } 

    // - >ループ各画像処理
    機能をhandleAllImg（）{ 
        （VAR I = 0、LEN = imgList.length; IがLEN <; I ++の）のために{ 
            VAR curImg = imgList [I]; 
            IF （curImg.isLoad）{//現在の画像が処理されている場合、あなたはプロセスを繰り返す必要はありません
                続行; 
            }
 
            // - >ときにのみ、その後、処理B、より小さく、
//するvar A = utils.offset（curImg） .top + curImg.offsetHeight; // Aではない画像が、何の絵を隠されていないので、彼のoffsetHeightが0時にそれがあるのでそう、ここで算出 
            = 1ターゲット; //合計距離は1であります
                                                                      Iピクチャにしたい場合は、我々は彼の親のライン上のコンテナを取得することができます//値、ハハ
            VAR curImgPar = curImg.parentNode、
                A = utils.offset（curImgPar）.offsetTop + curImgPar.offsetHeight、
                B = utils.win（ "clientHeight"）+ utils.win（ "scrollTopスプライト"）; 
            IF（A <B）{ 
                lazyImg（curImg）; 
            } 
        } 
    } 

    // - >効果を達成フェード
    機能フェードイン（curImg）{ 
        VAR = DURATION 500、//総時間
            間隔= 10 // 10ミリ秒がかかり 
        VARタイマ= window.setInterval（関数（） {
        VARステップ=（目標/期間） *インターバル; // ステップの各ステップ
            utils.getCss2SS curOp = VAR（curImg、 "不透明度"）; 
            IF（curOp> = 1）{ 
                  curImg.style.opacity = 1; 
                  window.clearInterval（タイマ）; 
                  戻り
            } 
            curOp + =ステップと
            curImg.style.opacity = curOp; 
        }間隔）; 
    } 

    // 4、ときに負荷他の画像のスクロールバーがスクロールするときに、（1）500msのオーバーロード画像スクリーンを開始
    window.setTimeoutは（handleAllImg、500）; 
    window.onscroll = handleAllImg。
    
</ SCRIPT> 
</ BODY> 
</ HTML>

　　

        2）utils.js

//グローバル変数への衝突、我々は、シングルモードの実施形態を使用
するvar utilsのを= { 
  オブジェクトJSON形式JSON形式に文字列を変換：// jsonParse 
  jsonParse：関数（STR）{ 
      VARヴァル= NULLを、
       試み{ 
          ヴァル= JSON .parse（STR）; 
      }キャッチ（E）{ 
          ヴァル=評価（ '（' + STR + ''））; 
      } 
      ヴァルを返す; 
  }、

  getCss2SS：関数（curEle、ATTR）{ 
      VAR =ヴァルのNULL、NULL REG = ; 
      IF（ウィンドウの'getComputedStyle'）{ 
          ヴァル= window.getComputedStyleが（ヌルcurEle、）ATTR]; 
      } {他
          IF（ATTR === '不透明'）{ 
              ヴァル= curEle.currentStyle [ATTR]; // - >戻るアルファ（不透明度= 10）
              REG = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i; //取得数10 
              のval = reg.test（val）でreg.exec（ヴァル）[？ 1] / 100：1 //超強力、テストとexecを使用！！！
          } 
          ヴァル= curEle.currentStyle [ATTR]; 
      } 
      REG = /^-?\d+(\.\d+)?(px|pt|rem|em)?$/i; //一致する場合：純粋な値または有します数値の単位は
      ？;ヴァル：reg.test（ヴァル）parseFloatは（ヴァル）を返し
  、} 

  オフセット関数（curEle）{ 
      VAR totalLeft =ヌル、
          totalTop =ヌル、
          PAR = curEle.offsetParentを; 
      //自分自身のために最初に蓄積
      totalLeft + = curEle.offsetLeft; 
      totalTop + = curEle.offsetTop; 

      一方（PAR）{
          （navigator.userAgent.indexOf（ "MSIE 8.0"）=== -1）{もし 
              //親参照フレーム蓄積
              totalTop + = par.clientTop。
              totalLeft + = par.clientLeft。
          } 
          //累加父级参照物本身的偏移
          totalTop + = par.offsetTop。
          totalLeft + = par.offsetLeft。
          PAR = par.offsetParent。
      } 
      にconsole.log（ 'offsetTop：' + totalTop + 'offsetLeft：' + totalLeft）。
      VaRの結果= {}; 
      result.offsetTop = totalTop。
      result.offsetLeft = totalLeft。
      結果を返します。
  }、

  勝つ：関数（ATTR、値）{ 
      場合（値===未定義）{ 
          はdocument.firstChildを返す[ATTR] || document.body [ATTR]。
      }
      document.firstChild [ATTR] =値。
      document.body [ATTR] =値。
  } 
}。

 

        3、JSONファイル

[{「IMG」：「./ IMG / new1.PNG」、 『タイトル』： 『1つの電力ネットワーク戦略と』サーティーンファイブ『フォーティーン大戦略』、 『DESC』：「1つのインターネットは人類の最大の二十世紀でありますインターネットの発明は、二十世紀の人類「}、最大の発明である
 「：」./ IMG / new2.PNG「」タイトル『：』 {」IMG。2電源ネットワーク戦略と『1305年』 14大戦略」 、「DESC」：「2インターネットは人類20世紀の最も偉大な発明であり、インターネットは、二十世紀の人類の最大の発明である」}、
 {「IMG」：「./ IMG / new3.PNG」、 『タイトル』：「3ネットワーク電源戦略と「1305年」14大戦略「」DESC 『：』 3インターネットは人類20世紀の最も偉大な発明であり、インターネットは「二十世紀の人類の最大の発明です} 
]