前端優化——懶加載篇

時間 2019-12-09

標籤前端優化加載简体版

原文原文鏈接

懶加載

1.什麼是懶加載

懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用戶滾動到它們以前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些狀況下，它還能夠幫助減小服務器負載。常適用圖片不少，頁面很長的電商網站場景中。javascript

2.爲何要用懶加載

能提高用戶的體驗，不妨設想下，用戶打開像手機淘寶長頁面的時候，若是頁面上全部的圖片都須要加載，因爲圖片數目較大，等待時間很長，用戶不免會心生抱怨，這就嚴重影響用戶體驗。
減小無效資源的加載，這樣能明顯減小了服務器的壓力和流量，也可以減少瀏覽器的負擔。
防止併發加載的資源過多會阻塞js的加載，影響網站的正常使用。

3.懶加載的原理

首先將頁面上的圖片的 src 屬性設爲空字符串，而圖片的真實路徑則設置在data-original屬性中，當頁面滾動的時候須要去監聽scroll事件，在scroll事件的回調中，判斷咱們的懶加載的圖片是否進入可視區域,若是圖片在可視區內將圖片的 src 屬性設置爲data-original 的值，這樣就能夠實現延遲加載。css

4.懶加載實現步驟

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Lazyload</title>
        <style> .image-item { display: block; margin-bottom: 50px; height: 200px;//必定記得設置圖片高度 } </style>
    </head>
    <body>
    <img src="" class="image-item" lazyload="true" data-original="images/1.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/2.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/3.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/4.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/5.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/6.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/7.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/8.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/9.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/10.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/11.png"/>
    <img src="" class="image-item" lazyload="true" data-original="images/12.png"/>
    <script> var viewHeight =document.documentElement.clientHeight//獲取可視區高度 function lazyload(){ var eles=document.querySelectorAll（'img[data-original][lazyload]'） Array.prototype.forEach.call(eles,function(item,index){ var rect if(item.dataset.original==="") return rect=item.getBoundingClientRect()// 用於得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置 if(rect.bottom>=0 && rect.top < viewHeight){ !function(){ var img=new Image() img.src=item.dataset.url img.onload=function(){ item.src=img.src } item.removeAttribute（"data-original"）//移除屬性，下次再也不遍歷 item.removeAttribute（"lazyload"） }() } }) } lazyload()//剛開始還沒滾動屏幕時，要先觸發一次函數，初始化首頁的頁面圖片 document.addEventListener（"scroll"，lazyload) </script>
    </body>
    </html>