当前位置:Gxlcms > JavaScript > js可视区域加载:getBoundingClientRect方法

js可视区域加载:getBoundingClientRect方法

时间:2021-07-01 10:21:17 帮助过:6人阅读

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

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

getBoundingClientRect方法:

1.png

代码:

<!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方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行