在html页面未加载完成时会有一段空白,增强用户体验的话,必须在未加载完成时实现动态效果
效果如下:
1、一个普通html页面,内容如下
<html>
<head>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="loading" class="loader">
</div>
</body>
</html>
这样倒是有动态效果啦,可是它就一直显示着啦
2、当内容加载完成取消动态效果
<html>
<head>
<script src="jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("#loading").fadeOut("slow");
})
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="loading" class="loader">
</div>
<!--你的内容-->
</body>
</html>
这样就实现了动态加载效果,但是当加载内容过多的时候该方法就没有过多的意义啦
源码下载:html动态加载效果源码