当元素处于可视区域时再加载,例如淘宝天猫上打开网页时不是所有图片都加载出来了,而是当滚动条滚动到那个区域时才加载出来图片。
方法:判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度,如果小于就显示。这里可以用一个方法: 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可视区域加载:getBoundingClientRect方法的详细内容,更多请关注php中文网其它相关文章!
已抢66570个
抢已抢37723个
抢已抢20888个
抢已抢2588个
抢已抢19138个
抢