写真遅延ロードとプリロード

ウィンドウの可視領域の下の画像の上部までの距離が画像次いで、0未満であり、属性値image.srcのセットを生成し、配置された場合に遅延ロードは、実際には、画像ウィンドウの可視領域までの距離を計算します対応する画像の位置

遅延ロードを達成するために、ページに追加動画像と画像要素を作成すること。

プリロード：実装するには、各画像要素のsrc属性にアドレス情報の画像の配信サイクルをすることができ、スクリプトに直接imgaeアレイを作成し、ページをダウンロードする画像を入力しました

遅延読み込みの実装：

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <スタイル> 
        UL { 
            マージン -left：50％; 
            位置：相対; 
            左： - 100ピクセル。
            幅：200pxの。
            高さ：200pxの。
            背景 - 色：ゴールド; 
            オーバーフロー：自動; 
            リスト - スタイル：なし。
            パディング：0PX。
        } 
        のLi {
            幅：100ピクセル; 
            高さ：100pxに。
            背景 - 色：緑; 
            マージン - 下：10pxの; 
        } 

        IMG { 
            幅：100pxに。
            高さ：100pxに。
        }
     </スタイル> 
    <タイトル>懒加载</ TITLE> 
</ HEAD> 
<BODY> 
    <H1>图片懒加载</ H1> 
    <UL>         
        <LIデータ-SRC = "のhttp：//cover.read.duokan .COM / mfsv2 /ダウンロード/ fdsc3 / p01N203pHTU7 / Wr5314kcLAtVCi.jpg！T "> <I> </ I> </ LI> 
        <LIデータ-SRC ="のhttp：//77fkxu.com1.z0.glb.clouddn。 COM / 20160308 / 1457402219_73571.jpg "> <I> </ I> <
        <LIデータ-SRC = "http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"> <I> </ I> </ LI> 
        <LIデータ-SRC = "http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"> <I> </ I> </ LI> 
        <LIデータ-SRC = "http://img.bitscn.com /upimg/allimg/c150708/14363B06253120-6060O.jpg "> <I> </ I> </ LI> 
        <LIデータ-SRC =" http://pic.58pic.com/58pic/17/18/97/ 01U58PIC4Xr_1024.jpg "> <I> </ I> </ LI> 
        <LIデータ-SRC =" http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t "> <I> </ I> </ LI> 
        <LIデータ-SRC = "http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"> <I> </ I> </ LI> 
        <LIデータ-SRC = "http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"> <I> </ I> </李>
        <LIデータ-SRC = "http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"> <I> </ I> </ LI> 
        <LIデータ-SRC = "http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"> <I> </ I> </ LI>
        <LIデータ-SRC = "のhttp：// pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg "> <I> </ I> </ LI> 
        <LIデータ-SRC =" http://cover.read.duokan.com/mfsv2 /download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t "> <I> </ I> </ LI> 
        <LIデータ-SRC =" http://77fkxu.com1.z0.glb.clouddn.com/20160308/ 1457402219_73571.jpg "> <I> </ I> </ LI> 
        <LIデータ-SRC =" http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg "> <I> </ I > </ LI> 
        <LIデータ-SRC = "http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"> <I> </ I> </ LI>
        <LIデータ-SRC = "http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"> <I> </ I> </ LI> 
    </ UL> 
    <スクリプト> //
        本質動的画像IMGが動的にロードさせて生成し、可視領域か否かを判断する
        
       VAR UL = document.getElementsByTagName（ "UL"）[0 ;]
        VaRの LIS = document.getElementsByTagName（ "李" ）;
        機能チェック（要素）{
             // 画像が来るようにロードされているかどうかを決定する
            // https://blog.csdn.net/weixin_40929761/article/details/81061434 
            // scrollTopスプライトからoffsetTop文書の先頭からの距離が、幅の200μlのをロールオーバー減算後の素子間隔は底ULの距離であり、
            // それに意味0より小さい
            IF（element.offsetTop-ul.scrollTop-200である<= 0 ）{
                 リターン trueに; 
            
            } そう{
                 リターン はfalse ; 
            }
        } 
       document.getElementsByTagName（ "UL"）[0] .onscroll = 関数（）{
            ため（LET i = 0; iはlis.length <; iは++ ）{
                 場合（チェック（LIS [I]））{ 
                    LIS [I] .style.backgroundColor =「赤」。
                    VaRの IMG =のdocument.createElement（ "IMG" ）; 
                    img.src = LIS [I] .dataset.src。
                    LIS [I] .appendChild（IMG）。
                } 

           } 
       }
     </ SCRIPT> 
</ body> 
</ HTML>

写真遅延ロードとプリロード

おすすめ