2011年04月26日

页面载入进度条

Alex Qin

web

2011年04月26日 [ Modified : 2024年11月18日 ]

Microhu 同学刚刚把这个东西搞上，其实我也很早就在ZWWoOoOo 的付费主题中看到过了。不过一直自己的主题没地方放，二是懒得动手，所以一直没有捣鼓过。不久前在Dianso 童鞋那里偷了现在顶部那东东，所以也算有个位置放进度条了，好吧，我也加上玩玩。

不过对于代码，Microhu童鞋很忙，还好Timothy 同学已经整理出来了，所以我就是用了现成的。它的原理：在页头放置一个 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。请根据下面步骤来。

首先，确定你的主题已经引入 jQuery 框架(一定要放在页头 <head>标签内)，然后在header.php中任意位置插入如下jQuery 代码

< script type = "text/javascript" >
    $("#loading").show();
$("#loading div").animate({
    width: "10%"
}); <
/script>

其中的10%应该随载入顺序逐步增加，直到 footer.php

之后在<body>标签起始位置放置：

<div id="loading" style="display: none;"><div style="width: 0%; display: block;"></div></div>

最后在footer.php文件中插入下面的代码：

< script type = "text/javascript" >
    $("#loading div").animate({
        width: "100%"
    }, function() {
        setTimeout(function() {
            $("#loading").hide();
        }, 1000);
    }); <
/script>

还有CSS文件，请参考下面代码自行加工：

#loading {
    height: 4px;
    left: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99999;
}

#loading div {
    display: none;
    height: 4px;
    background: #4171b8;
}

搞定收工，刷新查看效果吧！