懶加載 js----例子------圖片

時間 2019-11-20

原文原文鏈接

轉載自：https://www.jianshu.com/p/9b30b03f56c2javascript

懶加載工具類

<script type="text/javascript">

      //懶加載工具方法
      function lazyload(idName) {
        var imgs;
        if (idName == "container") {
            imgs = document.getElementById('container').querySelectorAll('img');
        }
        H = window.innerHeight;
        var lazyFunc=function () {
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            [].forEach.call(imgs, function (img) {
                if (!img.getAttribute('data-src')) {
                    return
                };
                if (H + S + 200 > getTop(img)) {
                    img.src = img.getAttribute("data-src");
                    img.removeAttribute("data-src");
                }
            })
        };

        window.onload = window.onscroll = lazyFunc;
        window.onscroll = lazyFunc;
        lazyFunc();

        function getTop(e) {
            var T = e.offsetTop;
            while (e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        };
    };

    lazyload("container");//執行懶加載，能夠哪裏須要哪裏再加
</script>

結束。html

原理：就是當圖片出如今瀏覽器可視區域中時，再把圖片的url傳給它，也能夠在這個時候建立圖片，而圖片被包裹在一個容器中，好比li或div，圖片的url放在其容器的自定義屬性data-src中；java

document.documentElement.clientWidth 　　//屏幕寬 375
document.documentElement.clientHeight 　　 //屏幕高 667
document.documentElement.scrollTop 　　 //左上角到html鼎高當前視線元素劃上去了多少，也就是當前00原點到頁鼎html元素的高度最底端3457
document.documentElement.scrollHeight　　 //4124 總頁高
window.innerHeight 　　 //667瀏覽器

window.innerWidth　　//375 函數

斷定其加載條件是，當圖片距離頁面頂端的距離小於瀏覽器滾動距離加上可視區域高度，即它出如今可視區域時，就加載它；工具

獲取圖片距離頁面頂端的高度利用offsetTop計算出其距離offsetParent的高度，再循環疊加，最終獲取到其距離頁面頂端的高度：

//offsetTop是元素與offsetParent的距離，循環獲取直到頁面頂部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetParent;
            }
            return T;
        }

做者：MatthewMaYao
連接：https://www.jianshu.com/p/9b30b03f56c2
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

可視區域高度爲

var H = window.innerHeight;

滾動距離爲

var S = document.documentElement.scrollTop || document.body.scrollTop;

而後定義賦值函數url

function lazyLoad(imgs) {
            var H = window.innerHeight;
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

做者：MatthewMaYao
連接：https://www.jianshu.com/p/9b30b03f56c2
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

最後在把頁面滾動函數賦值給元素window.onload，在全部元素加載完之後再進行操做，這一步很重要！spa

window.onload = window.onscroll = function () {
            lazyLoad(imgs);
        }

　　所有代碼以下：code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圖片懶加載</title>
</head>

<style>
    img {
        display: block;
    }
</style>

<body>
<div>
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">
    <img src="" data-src="images/girl1.jpg" alt="圖片">

</div>
</body>
<script type="text/javascript">

        var imgs = document.querySelectorAll('img');

        //offsetTop是元素與offsetParent的距離，循環獲取直到頁面頂部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetParent;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = window.innerHeight;
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () {
            lazyLoad(imgs);
        }


//    var imgs = document.body.querySelectorAll('img'),
//        H = window.innerHeight;  //瀏覽器視窗高度
//    function lazyload() {
//        var S = document.documentElement.scrollTop || document.body.scrollTop;   //滾動條滾太高度
//        [].forEach.call(imgs, function (img) {
//            if (!img.getAttribute('data-src')) {
//                return
//            }  //已經替換過的跳過
//            if (H + S - 200 > getTop(img)) {    //爲達到演示效果，這裏H+S減去200，延後加載時機
//                img.src = img.getAttribute("data-src");
//                img.removeAttribute("data-src");
//            }
//        });
//        [].every.call(imgs, function (img) {
//            return !img.getAttribute('data-src')
//        }) && (window.removeEventListener("scroll", lazyload, false));   //完成全部替換後註銷事件
//
//    }
//
//    window.addEventListener("scroll", lazyload, false);
//    window.addEventListener("load", lazyload, false);
//
//    function getTop(e) {
//        var T = e.offsetTop;
//        while (e = e.offsetParent) {
//            T += e.offsetTop
//        }
//        return T
//    }


</script>
</html>

做者：MatthewMaYao
連接：https://www.jianshu.com/p/9b30b03f56c2
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

結束。htm

相關標籤/搜索

每日一句

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