【重點突破】—— 各種真·假Loading效果的實現
阿新 • • 發佈：2018-11-04
stat per https filter expr ie9 覆蓋 set 生成
前言：因為公司做廣告展示的項目較多，每個三維模型的加載都需要一段時間，通常這段時間由一個Loading加載頁動態呈現，這裏是除公司框架公用loading.js之外單獨用的幾種常見方式。
| 一、JS豎線增加的loading效果 |
關鍵點：
1、動態添加內容
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
2、定時器執行函數
{setTimeout("count()",100);}
完整代碼：
<body bgcolor="#FFFFFF" leftmargin
| 二、動態打點的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效果的實現