正文
实现加载页Loading Page 的几种方法
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
网页也可以像原生应用那样加入进度条或者其他的loading效果带来更好的等待体验,这里归纳几种我收集的实现loading page的方法,这几种方法在交互上都有利有弊,适用于不同应用。(PS:以下方法在网速较快的情况下loading效果都会一闪而过):
1.实现百分比效果的loading
这种方法最大程度地模拟了原生APP的加载过程,并可真实地反馈当前进度, 但目前每次刷新页面都会导致重新加载文件, 不利于刷新较多的应用。
实现百分比进度提示的关键在于首先获得DOM文件总大小,然后实时显示加载完毕的文件/DOM总大小,这样讲显得很抽象, 一般的网页DOM中字符串的数据量可以忽略,我们只需要计算图片的数据量当成总数据量就可以了,这里有个问题,如何得知每张图片加载成功呢?方法是在HTML中我们将<img>中图片url属性写成一个任意属性(比如这里可以用HTML5自定义属性“data-”)然后用JS将这个任意属性转换成标准src,这样做的逻辑是使得每个<img>中的src被正确设置后就可以得到一个当前进度。另外一个需要注意的地方是实时显示的百分比数字需要用到setTimeout这种阻断式的显示,而不能直接替换HTML内容,之前我就想当然地直接替换textContent或替换文本节点的方法来实时变换数字,在stack overflow上问了半天才知道方向错了(问题链接)导致百分比数字的变换无法渐进显示,而是直接输出为最后数字。DEMO在此百分比 Loading Page点击预览
HTML:
<!--loader-->
<div class="loader" id="loader" >
<div class="loader_box">
<div id="loader_num" style="font-size:15em;">100%</div>
</div>
</div><!--content-->
<div id="imgs" style="display:none;">
<img data-loadsrc="http://i3.tietuku.com/6c65325bbf87eb84.jpg" alt="whu">
<img data-loadsrc="http://i3.tietuku.com/780c4c17e7bcc81d.jpg" alt="cherry">
<img data-loadsrc="http://i3.tietuku.com/a72ff6249b76a87e.jpg" alt="eastLake">
<img data-loadsrc="http://i11.tietuku.com/7b57a678c8999dba.jpg" alt="Chrysanthemum">
<img data-loadsrc="http://i3.tietuku.com/eba2fb18598fa5ca.jpg" alt="window">
<img data-loadsrc="http://i3.tietuku.com/8f4305f8f9538037.jpg" alt="maker"></div>
JS:
var num = 0;
var loader = document.getElementById("loader")
var content =document.getElementById("imgs");
var loader_num= document.getElementById("loader_num");function imgLoad(img) {
var img_length = document.images.length ;
//“data-自定义属性”符合HTML5标准, 自带的dataset属性虽然与getAttribute性能没什么大区别,但方便简洁,可读性高,不过目前兼容性一般。
img.src = img.dataset.loadsrc ||img.getAttribute("data-load-src");//将百分比数字放在setTimeout()中实时变换数字 setTimeout (function(){
loader_num.textContent= Math.ceil((num)/(img_length)*100)+"%";
num ++;
if(num < img_length){
imgLoad(document.images[num]); }
else{
loader.style.display = "none";
content.style.display="block"; }
},100) //设置百分比数字变换间隔 }
imgLoad(document.images[num]);
2.使用window.onload事件
这种方法适合于绝大多数应用, 实现比较简单,当重新刷新页面时由于已经被缓存过, loading page的时间会相应地缩短。页面中的动画可以用gif图,或现在流行的CSS3,SVG动画。
实现逻辑是将loading page写在一个div块中, 并放在body内容的最前面,这样loading page将最先被解析,然后使用window.onload事件隐藏该loading page,实现加载效果 ,DEMO效果展示使用window.onload的Loading Page
代码:
HTML:
<!--loading page-->
<div class="loader">
<div class="loader-content">
<img src="http://i3.tietuku.com/997c27fdf4ce259b.gif" alt="Loader" class="loader-loader" />
</div>
</div>
<!--content page-->
<div class="content">
content
</div>
CSS:
@charset "UTF-8";.loader {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
background: #000;
text-align: center;
/* loader页面消失采用渐隐的方式*/
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
/* 使用base64编码嵌入加载的logo */
.loader-content {
background:url();
background-size: 123px 38px;
display: block;
position: relative;
padding-top: 50px;
top: 45%;}
.fadeout {
opacity: 0;
filter: alpha(opacity=0);
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);
JS:
window.onload = function(){
setTimeout(function(){
var loader = document.getElementsByClassName("loader")[0];
loader.className="loader fadeout" ;//使用渐隐的方法淡出loading page
setTimeout(function(){loader.style.display="none"},1000)
},1000)//强制显示loading page 1s
}
3.在<head>中直接粘贴JS代码一次性实现
这种方法方便快捷, 一键搞定。
在这篇帖子中(JS实现页面加载完毕之前loading提示效果)也提供了一个一次性解决的方案,它的原理是使用JS写入一个loading的div,样式等也都包含在内,这边之所以要获得页面宽度和高度,是因为要保持里面loading框的宽高比。只需要直接将这段JS代码放在<head>中就实现了页面loading,相当方便,注意:记得替换loading.gif的效果图。
DEMO效果(由于内容较少,如果你的网速较快,loading会一闪而过)
在<head>中直接粘贴JS代码一次性实现的Loading效果
转帖:
//获取浏览器页面可见高度和宽度
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:1;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(Image/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 page一些博客:
给页面加上Loading效果最简单实用的办法
张鑫旭大大的文章:
再说CSS3 animation实现点点点loading动画
loading page后宽高体验优化方法:
内容loading加载后高度变化CSS3 transition体验优化