网页加载进度条的JS程序开发思路与实际应用（js页面加载进度条）

2.为loading容器设定样式，以本博的进度条为例，样式如下：

loading

background

#FF6100;//设置进度条的颜色

height

5px

//设置进度条的高度

position

fixed

//设定进度条跟随屏幕滚动

top

//将进度条固定在页面顶部

index

99999

//提高进度条的优先层级，避免被其他层遮挡

3.通过jquery的animate动画效果，来实现进度条的动画加载过程。简单的进行构思，决定使用由左向右的加载效果。终animate的执行代码为“$(‘.loading’).animate({‘width':’100%’},200);”

4.思考需要设置几个加载进度节点。上面通过构思，我们已经决定使用30%、60%、70%、100%四个进度节点，分别插入到对应的页面位置。并结合上面的animate动画代码，终确定四个进度节点的代码为：$(‘.loading’).animate({‘width':’30%’},50)、$(‘.loading’).animate({‘width':’60%’},50)、$(‘.loading’).animate({‘width':’70%’},50)、$(‘.loading’).animate({‘width':’100%’},50)。可能大家会问，为什么速度变成了50毫秒？因为之前一步加载为100%的动画被分成份，所以为了保证动画的连贯性，将其每份切分成为50毫秒。

三、插入到页面中的实际应用示例

以本博模板页文件index.php为例，给大家展示四个节点如何插入到对应的位置。当然这个示例只是为了更好的解释上面的程序策划结论，并不限于这种设置方法。大家在需要的地方可以发挥更多的想象，举一反三创造出更绚丽的样式。

index.php文件代码

/**

*Themaintemplatefile.

*ThisisthemostgenerictemplatefileinaWordPresstheme

*andoneofthetworequiredfilesforatheme.

*Itisusedtodisplayapagewhennothingmorespecificmatchesaquery.

*E.g.,itputstogetherthehomepagewhennohome.phpfileexists.

*@packageWordPress

*@subpackageTwenty_Ten

*@sinceTwentyTen1.0

ini_set

'display_errors'

false

//关闭报错

get_header

//引用模板的头部PHP文件

type

"text/javascript"

'.loading'

animate

'width'

'33%'

//个进度节点

div

class

"main"

/*Runthelooptooutputtheposts.

*Ifyouwanttooverloadthisinachildthemethenincludeafile

*calledloop-index.phpandthatwillbeusedinstead.

get_template_part

'loop'

'index'

div

#main-->

type

"text/javascript"

'.loading'

animate

'width'

'55%'

//第二个节点

get_sidebar

//引用sidebar模板php文件

type

"text/javascript"

'.loading'

animate

'width'

'78%'

//第三个节点

get_footer

//引用foot模板php文件

type

"text/javascript"

'.loading'

animate

'width'

'100%'

//第四个节点

四、程序的补充完善与优化

通过上面三步、已经基本可以完成整个loading程序的运行。但是进度条加载完成后，无法自动消失？这当然是不行的了，因此我们需要使用另外一段代码，在文档加载完成后将进度条隐藏。

document

ready

function

'.loading'

fadeOut

通过以上设置，即可当页面100%加载完成后，执行jquery的fadeOut函数，将进度条隐藏，完成整个程序的收尾。