有时如果一个网页里的内容比较多,比如图片比较多而且大,那么网页的显示效果是一点一点加载显示,看着很卡的感觉,这样用户体验会比较差。
如果能在网页加载页面内容的时候,显示一个进度条或者提示loading加载中或者其他内容,等页面加载完成后再显示网页内容,那么能在一定程度上减少访客的等待焦虑感,提升用户体验,降低网站的跳出率。
作者在帮客户制作网站中,偶然发现了一个这种插件,基于jquery的,几行代码即可实现效果,特分享出来,作为以后备用,也希望能帮上对这块感兴趣的朋友。
1、loading效果的html部分这样写,就几个div标签
<div id="preloader"> <div class="jumper"> <div></div> <div></div> <div></div> </div> </div>
2、loading效果的js部分这样写
$(function(){ $(window).on('load', function() { $("#preloader").animate({ 'opacity': '0' }, 600, function() { setTimeout(function() { $("#preloader").css("visibility", "hidden").fadeOut(); }, 300); }); }); })
3、loading效果的css部分这样写即可
#preloader { overflow:hidden; background-image:linear-gradient(135deg,#a759d1 0%,#2196F3 100%); left:0; right:0; top:0; bottom:0; position:fixed; z-index:9999; color:#fff } #preloader .jumper { left:0; top:0; right:0; bottom:0; display:block; position:absolute; margin:auto; width:50px; height:50px } #preloader .jumper>div { background-color:#fff; width:10px; height:10px; border-radius:100%; -webkit-animation-fill-mode:both; animation-fill-mode:both; position:absolute; opacity:0; width:50px; height:50px; -webkit-animation:jumper 1s 0s linear infinite; animation:jumper 1s 0s linear infinite } #preloader .jumper>div:nth-child(2) { -webkit-animation-delay:.33333s; animation-delay:.33333s } #preloader .jumper>div:nth-child(3) { -webkit-animation-delay:.66666s; animation-delay:.66666s } @-webkit-keyframes jumper { 0% { opacity:0; -webkit-transform:scale(0); transform:scale(0) } 5% { opacity:1 } 100% { -webkit-transform:scale(1); transform:scale(1); opacity:0 } }@keyframes jumper { 0% { opacity:0; -webkit-transform:scale(0); transform:scale(0) } 5% { opacity:1 } 100% { opacity:0 } }
可以把js和css部分放到文件中,然后作为一个preloader插件,然后引用即可

感兴趣的朋友可以下载试试:
如果网页内容还没加载完毕,最终呈现loading效果如下:
