前端提示“页面正在载入”的功能实现

      首先,当用户网络比较慢,或者服务器计算量比较大时,前端展示一个“页面正在载入”的提示,对用户体验是非常有用的,可以适度缓解用户的不耐烦的心情。这篇文章主要讲解“页面正在载入”功能的实现,内容比较基础。

      一般而言,它的基础原理就是将“正在载入”的提示放在一个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%;
width: 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> 

     

相关文章:

jquery实现的进度条

posted @ 2011-09-27 21:48 lengyuhong 阅读(...) 评论(...) 编辑 收藏