月亮上的妖精

标签： loding

  • jQuery 页面载入进度条

    页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

    20090208154308347

     上图展示了传统 WordPress 模板在浏览器中的载入顺序，

    Loading 条的出现和消失分布于头尾。 

    20090208154308890

     如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。演示效果见本站 要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>

    CSS 可以这么写：

    loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
    为了让 loading 显示不要过于突兀，可以先隐藏 然后在网页加载时 开始显示：
        <!-- loading 加载信息开始-->
<script type="text/javascript"> $("#k_loading").show(100);</script>
    <!-- loading -->

    准备工作到这里就做好了。 接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：

    <script type=”text/javascript”>$(“#k_loading div”).animate({width:”16px“}).text(“16%”)</script>

    其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

    <!– loading  Ajax结束 逐渐隐藏 –>

        <script type=”text/javascript”>$(“#k_loading div”).animate({width:”100px”}).text(“100%”)</script>

        <script type=”text/javascript”>setTimeout(function(){$(“#k_loading”).hide(500)},1000)</script> //

    用于载入完毕后隐藏进度条。

    效果见本站