js可视区域图片懒加载

Posted 2020-09-13 午休随笔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js可视区域图片懒加载相关的知识，希望对你有一定的参考价值。

可视区域图片懒加载

实现原理，页面滚动时获取需要懒加载的图片，判断此图片是否在可视区域内，是则设置图片data-src地址为src地址，加载图片。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jquery可视区域图片懒加载</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            img {
                width: 100%;
                display: block;
            }
            
            .content {
                width: 100%;
            }
            
            
        </style>
    </head>

    <body>

        <div class="content">
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i1/94720297/TB2jUhMpypnpuFjSZFkXXc4ZpXa_!!94720297.jpg" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
            </div>
            <div class="m1">
                <img class="J-lazd" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="https://img.alicdn.com/imgextra/i3/94720297/TB2T5RFm84lpuFjy1zjXXcAKpXa_!!94720297.png" />
            </div>
        </div>

        <script type="text/javascript">
            //调用
            visibleImgLazyload();
            //触发滚动 防止第一屏不加载
            $("body,html").scrollTop(1);
            /**
             * 可视区域 img 加载
             */
            function visibleImgLazyload() {
                //当前窗口高度
                var winHeight = $(window).height();
                //整个文档高度
                var bodyHeight = $(document).height();
                //如果图片不满屏，直接加载
                if(bodyHeight <= winHeight) {
                    $(".J-lazd").each(function() {
                        var $this = $(this);
                        if($this.attr("data-url") != $this.attr("src")) {
                            //如果为空，src设置为data-src
                            if($this.attr("data-src")) {
                                $this.attr("src", $this.attr("data-src"));
                            } else {
                                $this.attr("data-src", $this.attr("src"));
                            }
                        }
                    });
                } else {
                    //容差值 预加载上下100像素内的图片
                    var phase = 100;
                    $(document).on("scroll", function(e) {
                        $(".J-lazd").each(function() {
                            var $this = $(this);
                            //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度  
                            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
                            //屏幕顶部距离最顶部的高度   减去图片高度，上拉时也会点到图片就加载
                            var thisTop = parseInt($(window).scrollTop()) - parseInt($this.height());
                            var imgTop = parseInt($this.offset().top);
                            if(imgTop >= thisTop - phase && imgTop <= thisButtomTop + phase && $this.attr("data-url") != $this.attr("src")) {
                                //如果为空，src设置为data-src
                                if($this.attr("data-src")) {
                                    $this.attr("src", $this.attr("data-src"));
                                } else {
                                    $this.attr("data-src", $this.attr("src"));
                                }
                            }
                        });
                    });
                }
            }
        </script>

    </body>

</html>

以上是关于js可视区域图片懒加载的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现图片懒加载原理

原生JS实现图片懒加载之一：Element.getBoundingClientRect()