【功能】关于页面加载进度条百分比实现的伪方法
经常看到有项目页面打开的时候会有进度条动画显示，之前还好奇，这个是怎么判断页面加载的完成比例的。所以我一般都是写的循环loading图标，然后判断window.onload，页面加载完成后进行隐藏。今天有空网上查看了下进度条百分比的实现方法，简单而言，就是通过计时器改变进度条的位置，大到一定比例（自己设定）之后就暂停，直到页面加载完成，进度条达到100%。
当然，我在进度条变化的过程中加了一些css3的渐变transition，让动画更加流畅。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>进度条显示功能</title> <style> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .loading { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #eee; transition: all linear 500ms 500ms; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 20px; border: 1px solid #000; border-radius: 10px; } .box { position: relative; margin-top: 2px; margin-left: 3px; width: 194px; height: 16px; border-radius: 9px; overflow: hidden; } .process { position: absolute; top: 0px; left: -90%; /*控制进度条显示*/ width: 100%; height: 100%; border-radius: 9px; background: green; transition: all linear 500ms; } .text { position: absolute; top: 30px; left: 50%; transform: translate(-50%, 0); } img { max-width: 50%; } </style> </head> <body> <div class="loading"> <div class="wrapper"> <div class="box"> <div class="process"></div> </div> <div class="text">正在加载...</div> </div> </div> <img src="http://pic1.win4000.com/wallpaper/2017-12-08/5a2a434b4dbb6.jpg" alt=""> <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t013d4c64d55c5234de.jpg" alt=""> <img src="http://photocdn.sohu.com/20110722/Img314235964.jpg" alt=""> <img src="http://5b0988e595225.cdn.sohucs.com/images/20170826/551c0d88c82141ef82272794f67f998b.jpeg" alt=""> <img src="http://picture.ik123.com/uploads/allimg/150401/3-150401100148.jpg" alt=""> <img src="http://p1.so.qhmsg.com/t01e0ff39fe7e1e3085.jpg" alt=""> <img src="http://p3.so.qhmsg.com/t0182eac9274efd3f25.jpg" alt=""> <img src="http://img.mp.itc.cn/upload/20160729/69e0b989850d41179d4cd0cd354981c7_th.png" alt=""> <img src="http://5b0988e595225.cdn.sohucs.com/images/20190129/545a28e235a14897a70847568959a8bf.jpeg" alt=""> <script> let rateNum = 10, key = false, process = document.getElementsByClassName('process')[0], loading = document.getElementsByClassName('loading')[0], text = document.getElementsByClassName('text')[0], timer = setInterval(function () { if (rateNum < 90) { rateNum += 10; process.style.left = (process - 100) + '%'; } }, 500) window.onload = function () { rateNum = 100; process.style.left = '0%'; clearInterval(timer); process.addEventListener('transitionend', function (e) { // 监听css3动画的完成 e.stopPropagation(); // 这里要阻止冒泡，否则loading捕捉到此次transitionend影响loading层对于opacity的动画捕捉 text.innerHTML = '加载完成'; loading.style.opacity = 0; // 这里为什么不直接设置display为none呢？这是因为css3 transition不支持display loading.addEventListener('transitionend', function () { loading.style.display = 'none'; // 直到opacity的渐变动画完成后再将其display设置为none }) }) } </script> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> </body> </html>
【参考文章】
