js原生懶加載方法

時間 2019-11-17
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LozyLoad</title>
    <style>
        .images{
            display: flex;
            flex-direction: column;
            text-align: center;
            width: 500px;
        }
        .img-item{
            height:400px;
            width: 400px;
            margin: 20px;
        }

    </style>
</head>
<body>
    <div class="images">
        <img class="img-item" alt="loading" data-src="imgs/img01.jpg">
        <img class="img-item" alt="loading" data-src="imgs/img02.jpg">
        <img class="img-item" alt="loading" data-src="imgs/img03.jpeg">
        <img class="img-item" alt="loading" data-src="imgs/img04.jpg">
        <img class="img-item" alt="loading" data-src="imgs/img02.jpg">
    </div>
    <!--
    <script type="text/javascript">
        //獲取觀察器實例  changes是被觀察的對象數組
        var observer = new IntersectionObserver(function(changes){  
            console.log(changes);
            changes.forEach(function(index,item){
                if(item.intersectionRatio > 0 && item.intersectionRatio < 1)
                    //target：被觀察的目標元素，是一個 DOM 節點對象
                    item.target.src = item.target.dataset.src;
            });
        });
        function addObserver(){
            var listItems = document.querySelectorAll('.img-item');
            listItems.forEach(function(item){
                //實例的observe方法能夠指定觀察哪一個DOM節點
                //開始觀察  observe的參數是一個 DOM 節點對象
                observer.observe(item);
            });
        }
        addObserver();
    </script>
    -->
    <script type="text/javascript">
    //獲取img
        var imgs = document.querySelectorAll('img');
        //懶加載方法
        var lazyload = function(){
            //獲取瀏覽器滾動高度
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            //獲取瀏覽器可視高度
            var winTop = window.innerHeight;
            for(var i=0;i < imgs.length;i++){
                //imgs[i].offsetTop 距離文檔頂部的高度
                //若是元素距離文檔頂部的高度小於  瀏覽器的滾動高度加瀏覽器的可視高度，則須要加載
                if(imgs[i].offsetTop < scrollTop + winTop ){
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }
        //調用懶加載函數
        function throttle(method,delay){
            var timer = null;
            return function(){
                var context = this, args=arguments;
                clearTimeout(timer);
                timer=setTimeout(function(){
                    // method.apply(context,args);
                    method()
                },delay);
            }
        }
        window.onscroll = throttle(lazyload,200);
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。