JS裏面的懶加載(lazyload)

時間 2019-11-29

標籤裏面加載 lazyload 欄目 JavaScript 简体版

原文原文鏈接

　　懶加載技術(簡稱lazyload)並非新技術, 它是js程序員對網頁性能優化的一種方案.lazyload的核心是按需加載html

　　涉及到圖片，falsh資源 , iframe, 網頁編輯器(相似FCK)等佔用較大帶寬，且這些模塊暫且不在瀏覽器可視區內,所以能夠使用lazyload在適當的時候加載該類資源.避免網頁打開時加載過多資源，讓用戶等待過久，程序員

　　來，舉個栗子，當你去東哥的綠帽網網購的時候，打開首頁的時候，直接在導航欄選了商品種類跳轉到了列表頁，那首頁下方那些未顯示的區域的圖片需不須要加載，固然不須要了，你根本沒看他們，加載出來幹啥瀏覽器

　　說白了就是佔着茅坑不拉粑粑，那咱們怎麼解決呢，這時咱們就該用到懶加載技術，只有當這部分圖片出如今可視區內再去請求服務器。性能優化

　　懶加載的核心：在如何在適當的時候加載用戶須要的資源(這裏用戶須要的資源指該資源呈如今瀏覽器可視區域)服務器

　　下面來一個大栗子編輯器

　　來，把朕的代碼例子呈上來函數

　　例子的思路：頁面渲染時將src路徑放到自定義屬性中去，這樣頁面加載時圖片就不會去請求服務器，當圖片滾動到可視區內時，獲取它的自定義屬性並賦值給src佈局

　　這是頁面的佈局，圖片路徑注意改一會兒性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        img{
            width: 200px;
            height: 200px;
            display: block;
            float: left;
        }
    </style>
</head>
<body>
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">
    <img src="" data-url ="img/1.jpg">
    <img src="" data-url ="img/2.jpg">
    <img src="" data-url ="img/3.jpg">
    <img src="" data-url ="img/4.jpg">
    <img src="" data-url ="img/5.jpg">
    <img src="" data-url ="img/6.jpg">
    <img src="" data-url ="img/7.jpg">
    <img src="" data-url ="img/8.jpg">
    <img src="" data-url ="img/9.jpg">
    <img src="" data-url ="img/10.jpg">

　　來上關鍵的JS代碼優化

<script>
    //頁面加載時先調用一次loadImg函數
    loadImg()
    //添加滾動事件
    window.onscroll = function () {
        loadImg()
    }

    function loadImg() {
        var iH = document.documentElement.clientHeight;
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        var img = document.getElementsByTagName("img");
        for (var i = 0; i < img.length; i++) {
            if ((!img[i].bstop) && offsetTop1(img[i]) < (iH + t)) {
                //注意  真正在頁面上使用必定要加開關,不加開關每次條件符合時都會從新請求服務器，還不如不用懶加載
                //理解不了啥意思的同窗，能夠把img[i].bstop刪去試試
                //同時不要用offsetTop  
                //由於offsetTop是獲取離已定位的父元素的top值  
                //因此本身封裝一個計算offsetTop的函數
                var src = img[i].getAttribute("data-url");
                img[i].src = src;
                img[i].bstop = true;
                console.log(1)
            }
        }
    }

    //封裝獲取元素離上方的高度的函數
    function offsetTop1(obj) {
        var t = obj.offsetTop;
        while (obj.offsetparent) {
            obj = obj.offsetparent;
            t = t + obj.offsetTop;
        }
        return t;
    }
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。