重点突破—— 各种真·假Loading效果的实现
Posted ljq66
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重点突破—— 各种真·假Loading效果的实现相关的知识，希望对你有一定的参考价值。
前言：因为公司做广告展示的项目较多，每个三维模型的加载都需要一段时间，通常这段时间由一个Loading加载页动态呈现，这里是除公司框架公用loading.js之外单独用的几种常见方式。
| 一、JS竖线增加的loading效果 |
关键点：
1、动态添加内容
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
2、定时器执行函数
{setTimeout("count()",100);}
完整代码：
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<form name=loading>
<td align=center>
<p><font color=gray>正在载入首页，请稍后</font></p>
<p>
<input type=text name=chart size=46 style="font=family:Arial;
font-weight:border; color:gray; background-color:white; padding:0px;
border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial;
color:gray; text-align:center; border-width:medium； border-style:none;">
<script>
var bar = 0
var line = "||"
var amount = "||"
count ()
function count(){
bar = bar +2
amount = amount + line
document.loading.chart.value = amount
document.loading.percent.value = bar+"%"
if (bar<99){
setTimeout("count()", 100);
}else{
window.location = "目标页";
}
}
</script>
</p>
</td>
</form>
</tr>
</table>
</body>
| 二、动态打点的loading效果 |
1、基于box-shadow实现的打点效果
订单提交中：
<span class="dotting"></span>
.dotting {
display: inline-block; min-width: 2px; min-height: 2px;
box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
animation: dot 4s infinite step-start both; /* for IE10+, ... */
*zoom: expression(this.innerhtml = ‘...‘); /* for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: ‘...‘; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: ‘‘; } /* for IE9+ 覆盖 IE8 */
:root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/
@keyframes dot {
25% { box-shadow: none; } /* 0个点 */
50% { box-shadow: 2px 0 currentColor; } /* 1个点 */
75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; /* 2个点 */ }
}
currentColor这个关键字——其可以让CSS生成的图形的颜色跟所处环境的color属性值一样，也就是跟文字颜色一样
我们动画一个周期4秒钟，每秒分别显示的是0~3个点，使用step-start让动画不连续
2、基于border + background实现的打点效果
订单提交中：
<span class="dotting"></span>
.dotting {
display: inline-block; width: 10px; min-height: 2px;
padding-right: 2px;
border-left: 2px solid currentColor; border-right: 2px solid currentColor;
background-color: currentColor; background-clip: content-box;
box-sizing: border-box;
animation: dot 4s infinite step-start both;
*zoom: expression(this.innerHTML = ‘...‘); /* IE7 */
}
.dotting:before { content: ‘...‘; } /* IE8 */
.dotting::before { content: ‘‘; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */
@keyframes dot {
25% { border-color: transparent; background-color: transparent; } /* 0个点 */
50% { border-right-color: transparent; background-color: transparent; } /* 1个点 */
75% { border-right-color: transparent; } /* 2个点 */
}
currentColor关键字可以让图形字符化，必不可少；
最大功臣是CSS3 background-clip属性，可以让IE9+浏览器下左右padding没有背景色，于是形成了等分打点效果。
box-sizing是让现代浏览器和IE7/IE8占据宽度完全一样的功臣：IE7/IE8实际宽度是width+padding-right为12像素，其他现代浏览器为width+margin-left也是12像素；
这里CSS代码主要用来展示原理，故没有显示-webkit-animation以及@-webkit-keyframes私有前缀，实际目前还是需要的；
| 三、真loading·document.readystate加载提示 |
- loading效果的样式可以根据自己的风格修改
-
loading.gif这个图片需要自己找（网上很多的）
//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = ‘<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:‘ + _PageHeight + ‘px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ‘ + _LoadingLeft + ‘px; top:‘ + _LoadingTop + ‘px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/Content/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:‘Microsoft YaHei‘;">页面加载中，请等待...</div></div>‘;
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById(‘loadingDiv‘);
loadingMask.parentNode.removeChild(loadingMask);
}
}
| 四、真loading·window.onload读取完毕后执行 |
- 利用window.onload 是在页面完全读取完毕才执行的特性。
1、首先在我们在要使用载入条的 HTML 页面设计一个 ID 为 LoadingBar 的层
（此层的样式可以随便设置，还可以加入图片在其中。总之就是只要 ID 符合条件，其它都可以随便）
html代码：
<div id="LoadingBar">正在载入，请稍候……</div>
2、这个语句最好是放在页的最前端，也就是紧跟 <body> 标签的下面一行，这样才能确保在读页面的时候最先显示这一层。
最后，要在头部加上一段 javascript：
window.onload = initPage();
javascipt代码：
function initPage()
{
var objLoading = document.getElementById("LoadingBar");
if (objLoading != null)
{
objLoading.style.display = "none";
}
}
//关闭 LoadingBar 层的一个过程
注：转载请注明出处
以上是关于重点突破—— 各种真·假Loading效果的实现的主要内容，如果未能解决你的问题，请参考以下文章