欢迎光临
我们一直在努力

Loading效果实现:加载新页面前的等待过渡画面

由于最近在写一个web项目,由于前端框架开发,和后台查数据的语法不成熟导致页面加载速度过慢,遂想到用loading效果来过渡:

粗略的查阅了下网上的实现方法,在此总结下方法实现

先上效果图:

代码:

<link rel="stylesheet" href="http://lee.dkfirst.cn/lee_loading.css">
 <script src="http://lee.dkfirst.cn/lee_loading.js"></script>

上面两段代码放在<head></head>中间即可

思路详解:

JS部分:在页面加载前就先加载一个div罩,等待页面全部加载完成后,关闭此div罩

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离(loading框小部件的宽度为90px,高度为90px)
var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,
    _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;
                    filter:alpha(opacity=80);z-index:10000;">
                    <div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';
//呈现loading效果
document.write(_LoadingHtml);

//监听加载状态改变
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        //此引用了Jquery,页面没有导jq包的,需要自行加入
        $("#loadingDiv").fadeOut(1500);
    }
}

CSS部分:CSS3构造一个无限循环动作的loading框

.spinner {
 width: 60px;
 height: 60px;
 background-color: #67CF22;

 margin: 100px auto;
 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {
 0% { -webkit-transform: perspective(120px) }
 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}

@keyframes rotateplane {
 0% {
 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
 } 50% {
 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
 } 100% {
 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 }
}
未经允许不得转载:AA购_AA制合购VIP营销资源 » Loading效果实现:加载新页面前的等待过渡画面
分享到: 更多 (0)
如果觉得我的文章对您有用,您可以打赏博主或点赞文章,请随意打赏或点赞哟!
 打  赏

评论 抢沙发

  •  昵称 (必填)
  •  邮箱 (必填)
  •  网址(选填)

大前端WP主题 更专业 更方便

联系我们联系我们