1.思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层p，覆盖住图片，在内层p中引入加载时显示的图片，让内层p居中在页面上，利用setInterval定时器设置3秒后将外层p隐藏，从而显示图片，达到加载完后显示页面的效果。
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
$(function(){
var loading='
$('body').append(loading);
setInterval(function(){
$('.loading').fadeOut();
},3000)
})
知识点：
p居中：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
2.
思路：利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
知识点：
通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态'complete'，当达到complete状态，说明加载成功。
3.
思路：利用CSS3实现动画效果，达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。
利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loading .pic i{
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.loading .pic i:nth-child(2){
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading .pic i:nth-child(3){
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading .pic i:nth-child(4){
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading .pic i:nth-child(5){
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes load{
0%,40%,100%{
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20%{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes load{
0%,40%,100%{
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20%{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
知识点：
1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。
2.infinite:无限循环
3.animate-delay:0.1s 延时0.1s
4.@keyframes 动画名称{
0%{
}
100%{
}
}
