首先，当用户网络比较慢，或者服务器计算量比较大时，前端展示一个“页面正在载入”的提示，对用户体验是非常有用的，可以适度缓解用户的不耐烦的心情。这篇文章主要讲解“页面正在载入”功能的实现，内容比较基础。
一般而言，它的基础原理就是将“正在载入”的提示放在一个div下，页面开始，但数据还没到时，这个div是可见的，当数据到位后，将这个div隐藏掉即可。当然这种方法往往配合ajax和jquery实现。最简单的例子如下：
<html>
<head>
<title>load时的图片</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
#pageloading {
position: fixed;
_position: absolute;
top: 40%;
right: 50%;
100px;
padding: 2px;
text-align: center;
background: #c44;
color: #fff;
z-index: 999;
}
</style>
<script type="text/javascript">
function psHandler(data) {
$('#pageloading').hide();
// show the detail data
}
$(document).ready(function() {
$.ajax({ cache: false
, type: "GET"
, dataType: "json"
, url: "/get_data"
, error: function () {
//alert("error connecting to server");
}
, success: psHandler
});
});
</script>
</head>
<body>
</body>
<div id="pageloading" >正在载入....</div>
</html>
这里代码相对而言还是相当简单的，特别要强调是css， position: fixed和_position: absolute;是为了兼容IE,z-index: 999; 的作用是将这个图标出现在页面的最前端。
这种方法，还可以改成用图片来提示，只要将那段文字替换为以下的图片即可。
<div id="pageloading" ><img src="loading.gif"/></div>
相关文章：