jQuery页面加载进度条的实现代码

上图显示了传统Wordpress模板在浏览器中的加载顺序，加载条的出现和消失分布在头部和尾部。

如果我们把多个JS放在页面的不同位置，每个JS用来逐渐增加Loading栏的宽度，那么这个Loading栏无疑会更实用。一定程度上缓解了访客等待加载的枯燥感，同时也能客观反映页面加载的进度。如果结合jQuery内置的动画效果，可以和浏览器自带的状态栏进行对比。让我们从一个演示开始：地址。要在演示文稿上获得进度条效果，首先，介绍jQuery框架(必须放在页眉的head标签中)。然后放在body标签的起始位置：复制代码如下： div id=' loading ' div/div/div CSS可以写成：复制代码如下： # loading { width:100px高度：20 px；background: # A0DB0Epadding:5px位置：固定；left:0top:0} #正在加载div { width:1px高度：20 px；background: # F1FF4D}准备工作在这里完成。然后，请随意播放，根据你对图2的理解，放在模板各部分的合适位置：复制代码如下：脚本类型=' text/JavaScript ' $(' # loading div ')。动画({ width : ' 16px ' })/脚本，其中红色值应该随着加载顺序逐渐增加，直到footer.php。另外，别忘了把：复制代码放在footer.php的末尾。代码如下：脚本类型=' text/JavaScript' $ ('# loading ')。fadeout ()/script用于在加载后隐藏进度条。