随笔- 58 文章- 0 评论- 2 阅读- 10万

js原生懒加载方法

<!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>