网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用。
下面使用HTML+CSS+JS实现完整的Loading效果。
请先引入jQuery,因为JS定时隐藏依赖jq。
1.HTML
<div class="loaderbg"> <div class="spinner"> <div class="double rect1"></div> <div class="double rect2"></div> <div class="double rect3"></div> <div class="double rect4"></div> <div class="double rect5"></div> </div> </div>
loaderbg类为loading的背景色,为白色。
2.CSS
.loaderbg { background-color: #fff; width: 100%; height: 100%; overflow: hidden; position: fixed; left: 0; top: 0; z-index: 99999999 } ::-webkit-scrollbar { width: 7.5px; height: 6px; background-color: #f0f0f0; display: none } ::-webkit-scrollbar-thumb { background-color: #b1b1b1; border-radius: 15px } ::-webkit-scrollbar-thumb:hover { background-color: #777 } .spinner { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -30px; width: 50px; height: 60px; text-align: center; font-size: 10px } .spinner>.double { background: #49a9ee; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchDelay 1.2s infinite ease-in-out; animation: stretchDelay 1.2s infinite ease-in-out } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s } @-webkit-keyframes stretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(.4) } 20% { -webkit-transform: scaleY(1) } } @keyframes stretchDelay { 0%, 40%, 100% { transform: scaleY(.4); -webkit-transform: scaleY(.4) } 20% { transform: scaleY(1); -webkit-transform: scaleY(1) } }
3.JS
js在这里的作用为定时或网页加载完成后关闭loaderbg类
//页面加载完成之后隐藏loading $(window).load(function () { $(".loaderbg").hide(); }); //设置页面加载3秒之后隐藏loading /*$(function () { setTimeout(function () { $(".loaderbg").hide(); alert("页面加载完成啦!"); },3000); })*/
第一种方法是等待网页全部加载完成后再隐藏loading,但同时如果网页其他资源文件加载缓慢(如图片等),loading也会随之存在更长时间。
第二中方法是设置定时隐藏loading,可以根据实际需求更改隐藏时间,默认为3s。
建议实际使用时,删除 alert("页面加载完成啦!"); 避免引起用户反感,只做效果测试。
以上第一种方法jquery低版本测试正常,高版本可能会报错:ncaught TypeError: a.indexOf is not a function
at r.fn.load
原因是在jQuery 3.x 中取消了 load(),将 $(window).load(function () { 替换为 $(window).on('load',function(){ 即可,如:
$(window).on('load',function(){ $(".loaderbg").hide(); });
同时考虑到如果用户的浏览器侧不支持JavaScript或者JavaScript被禁用,需要使用noscript标签,添加display:none属性即可,noscript只会在浏览器环境不支持JS或者JS被禁用才会执行
<noscript> <style> .loaderbg { display: none; } </style> </noscript>
4.实例代码:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏_阿峰博客</title> <script src="https://libs.afengim.com/libs/jquery-3.1.1/jquery-3.1.1.min.js" type="application/javascript"></script> <style> .loaderbg { background-color: #fff; width: 100%; height: 100%; overflow: hidden; position: fixed; left: 0; top: 0; z-index: 99999999 } ::-webkit-scrollbar { width: 7.5px; height: 6px; background-color: #f0f0f0; display: none } ::-webkit-scrollbar-thumb { background-color: #b1b1b1; border-radius: 15px } ::-webkit-scrollbar-thumb:hover { background-color: #777 } .spinner { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -30px; width: 50px; height: 60px; text-align: center; font-size: 10px } .spinner > .double { background: #49a9ee; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchDelay 1.2s infinite ease-in-out; animation: stretchDelay 1.2s infinite ease-in-out } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s } @-webkit-keyframes stretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(.4) } 20% { -webkit-transform: scaleY(1) } } @keyframes stretchDelay { 0%, 40%, 100% { transform: scaleY(.4); -webkit-transform: scaleY(.4) } 20% { transform: scaleY(1); -webkit-transform: scaleY(1) } } </style> </head> <body> <!--html--> <div class="loaderbg"> <div class="spinner"> <div class="double rect1"></div> <div class="double rect2"></div> <div class="double rect3"></div> <div class="double rect4"></div> <div class="double rect5"></div> </div> </div> <!--end--> <p> <a href="https://www.afengblog.com/website-loading.html" target="_blank"><strong>使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏,地址:https://www.afengblog.com/website-loading.html</strong></a> </p> <!--noscript--> <noscript> <style> .loaderbg { display: none; } </style> </noscript> <!--end--> <!--script--> <script type="text/javascript"> //页面加载完成之后隐藏loading /*$(window).load(function () { $(".loaderbg").hide(); });*/ //设置页面加载3秒之后隐藏loading $(function () { setTimeout(function () { $(".loaderbg").hide(); alert("页面加载完成啦!"); }, 3000); }) </script> <!--end--> </body> </html>