js可视区域加载：getBoundingClientRect方法-js教程-PHP中文网

js可视区域加载：getBoundingClientRect方法

php是最好的语言

发布： 2018-08-10 16:56:16

原创

3147人浏览过

当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。

方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getboundingclientrect()，该方法返回一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。

getBoundingClientRect方法：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可视区域加载</title>
    <style>
        #showp {
            width: 500px;
            height: 350px;
            background-color: aqua;
            margin: 1000px auto 0 auto;
        }
        
        .showp {
            animation: loading 2s linear;
        }
        
        @keyframes loading {
            from {
                opacity: 0;
                transform: translate(-100%, 0);
            }
            to {
                opacity: 1;
                transform: translate(0, 0);
            }
        }
    </style>
</head>

<body>
    <p id="showp"></p>
    <script type="text/javascript">
        window.onscroll = function() {
            var show = document.getElementById("showp");
            // 获取浏览器窗口可视化高度
            var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            // 获取showp元素顶部到浏览器窗口顶部的距离
            var showTop = show.getBoundingClientRect().top;
            // 如果距离小于可视化窗口高度，就给showp元素添加动画效果
            if (showTop <= clientH) {
                show.classList.add("showp");
            }
        };
    </script>
</body>

</html>

登录后复制

运行结果：不知道为什么。。。结果的动图贴不上来。。。。口述一下好了：就是动画开始不加载，滚动条滚动到可以显示元素的时候才会开始加载动画。可以利用这个原理来实现图片的加载，就是图片到可视区域的时候给它赋src的值。
相关推荐：

JS图片预加载实例

查看大图点击大图隐藏

以上就是js可视区域加载：getBoundingClientRect方法的详细内容，更多请关注php中文网其它相关文章！