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

2017年11月25日

由于最近在写一个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);}
}

Loading效果实现：加载新页面前的等待过渡画面相关推荐

html界面等待状态,html页面Loading效果实现：加载新页面前的等待过渡画面
在里面引入以下css文件和js文件即可实现 loading.css如下 .spinner { width: 60px; height: 60px; background-image: linear- ...
js跳转新页面，指定div加载新页面
1.在当前页面上跳转新页面 window.open('#要载入的界面'); window.open('graphReportController.do?list&id=dzdxz'); win ...
android webview 刷新当前页面,Android WebView时重新加载导致页面刷新的问题
最近碰到一个需求,用WebView加载页面,选择了筛选条件之后,跳转到新的webVIew页面之后再返回,原来的筛选条件由于页面刷新导致已经清空,怎样才能解决返回的时候不去重新加载页面呢,网上很多答案是 ...
WebView通过loadDataWithBaseURL加载本地页面卡死
最近开发遇到一个使用 Android WebView加载本地页面进度条始终卡在20%左右不动的情况.打 Log.抓包发现卡在 WebView对象调用 loadDataWithBaseURL方法. 去网 ...
JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统var system ={win : false,mac : false,xll : false};//检测平台var p = navigator.platform;syste ...
关于ViewPager的适配器之——pagerAdapter加载缓存页面的机制
ViewPager有很多的适配器,如pagerAdapter,FragmentPagerAdapter等, 今天我想重点谈的是关于pagerAdapter加载缓存页面的机制的问题. 首先,使用page ...
vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
php frameset不显示,如何解决php加载frameset页面时显示空白问题
如何解决php加载frameset页面时显示空白问题发布时间:2020-06-09 11:46:54 来源:亿速云阅读:113 作者:Leah 如何解决php加载frameset页面时显示空白问题 ...
JS本地存储加载渲染页面信息、动态更新本地存储数据
本地存储数据加载到页面: 从本地存储中获取数据,并由字符串基础类型转换为对象类型(存储至堆内存中) 初始化变量data 为空数组(变量data存储在栈内存中) 将获取的数据赋值给变量data (实质为 ...

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

2017年11月25日

Loading效果实现：加载新页面前的等待过渡画面相关推荐

最新文章

热门文章