圖片懶加載

圖片懶加載

HTML部分：

• 內容請看如下代碼呈現：

<ul>
        <li data-src="images/show1.jpg">
            <i></i>
        </li>
        <li data-src="images/show2.jpg">
            <i></i>
        </li>
        <li data-src="images/show3.jpg">
            <i></i>
        </li>
        <li data-src="images/show4.jpg">
            <i></i>
        </li>
        <li data-src="images/show5.jpg">
            <i></i>
        </li>
        <li data-src="images/show6.jpg">
            <i></i>
        </li>
        <li data-src="images/show7.jpg">
            <i></i>
        </li>
        <li data-src="images/show8.jpg">
            <i></i>
        </li>
        <li data-src="images/show9.jpg">
            <i></i>
        </li>
        <li data-src="images/show9.jpg">
            <i></i>
        </li>
        <li data-src="images/show6.jpg">
            <i></i>
        </li>
        <li data-src="images/show7.jpg">
            <i></i>
        </li>
        <li data-src="images/show8.jpg">
            <i></i>
        </li>
        <li data-src="images/show9.jpg">
            <i></i>
        </li>
        <li data-src="images/show9.jpg">
            <i></i>
        </li>
        <li data-src="images/show9.jpg">
            <i></i>
        </li>
    </ul>

正如以上呈現的HTML部分相比較爲簡單主要是個UL li 組成，特別注意的有個data-src屬性後文會着重強調

css部分

• 此部份內容用到部分H5的內容因此看不懂得小夥伴們能夠先普及下H5的知識

/*網頁的全局樣式 解決兼容問題*/
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;}
body{ font-family:"宋體"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}


ul{
            overflow:hidden;
            width:800px;
            margin:0 auto;
        }
        li{
            width:50%;
            height:7rem;
            border:1px solid #ccc;
            box-sizing:border-box;
            float: left;
            overflow: hidden;
            position: relative;
        }
        li i{
            width:20px;
            height:20px;
            border-radius: 20px;
            position: absolute;
            border:2px solid #21d658;
            z-index: 0;
            left: 50%;
            top:50%;
            margin-top:-11px;
            margin-left: -11px;
            animation: move 1s infinite;
        }
        li i:before{
            position: absolute;
            width:5px;
            height:5px;
            border-radius: 4px;
            content: "";
            box-shadow: 0 0 10px #666;
            background: #fff;
            border:1px solid #fff;
            top:-3px; 
            left:50%;
            margin-left: -3px;
        }
        img{
            vertical-align:middle;
            border-width:0;
            width:100%;
            position: relative;
            z-index: 1;
        }
        @keyframes move{
            0%{
                transform:rotateZ(0);
            }
            100%{
                transform:rotateZ(360deg);
            }
        }

代碼呈現部分我用到了CONMON.css若是不曉得的話，我也有一個公司的標準，具體在本人頁面瀏覽注意

JS部分

• 此部分爲關鍵部分特別地方以加有註釋

<script>
    //獲取DOM中元素
    var ULL = document.getElementsByTagName("ul")[0],
        ULI = ULL.getElementsByTagName("li");

       //建立圖片部分
     function Img(option){

          var src = "";

          if (option.dataset.src) {
              src = option.dataset.src;
          }else{
              src = option.getAttribute("src");
          }

          if (option.children.length<=1) {
              var img = document.createElement("img");
              img.src = src;
              option.appendChild(img);
          }


     }
         //算出偏移量
     function Top(obj){
          var result = 0;
          //此處是一個循環
          while(obj){
              result += obj.offsetTop;
              obj = obj.offsetParent;
          }

          return result;
     }

     //綁定滾輪事件
     window.onscroll=function(){

         var ViewH = document.documentElement.clientHeight || document.body.clientHeight,
             top = document.documentElement.scrollTop || document.body.scrollTop,
             ViewTop = ViewH + top;
      for(var i = 0 ; i < ULI.length ; i++){
              //因爲超時調用最後執行，因此要保留this指針完成this的替代
              //判斷當前滑動的高度大於每個元素的高度完成任務
              if (Top(ULI[i])<ViewTop) {

                  //調用函數完成任務 此時能夠保留I
                  FN(ULI[i])
                  
                  // setTimeout(, delay[, lang])
              }


      }
         //引入一個超時調用
      function FN(OBJ){
           setTimeout(function(){
               Img(OBJ);
           },1000)
      }

     }
     //綁定onLOAd事件
     window.onload=function(){
          window.onscroll();
     }



    </script>

但願各位腳本夥伴們可以一塊兒努力！！