【重点突破】—— 各种真·假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这个图片需要自己找（网上很多的）

https://blog.csdn.net/haibo0668/article/details/52955078

//获取浏览器页面可见高度和宽度  
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效果的实现

猜你喜欢