js可视区域加载：getBoundingClientRect方法

来源：动视网责编：小采时间：2020-11-27 19:32:32

js可视区域加载：getBoundingClientRect方法

js可视区域加载：getBoundingClientRect方法:当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getBoundingCli

推荐度：

点击下载本文 文档为doc格式

导读js可视区域加载：getBoundingClientRect方法:当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getBoundingCli

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

方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： 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方法

推荐度：

点击下载本文 文档为doc格式

标签：加载方法区域

热门焦点

js可视区域加载：getBoundingClientRect方法

js可视区域加载：getBoundingClientRect方法

js可视区域加载：getBoundingClientRect方法

最新推荐

猜你喜欢

热门推荐