首先看一下Wordpress的模板在浏览器中的载入顺序

原理1
根据原理可以有下图的实现方法

原理2
要做改动的文件有6个，分别为header.php、index.php、single.php、sidebar.php、footer.php、style.css
①header.php
在body下加入如下代码：

  1. <div id="awloading">
  2.  
  3. <div id="awlfull">
  4.  
  5. </div>
  6.  
  7. <div id="awlpercent">
  8.  
  9. </div>
  10.  
  11. <div id="awlt">
  12.  
  13. 正在加载...
  14.  
  15. </div>
  16.  
  17. </div>
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

②index.php、single.php
加入如下代码：

  1. <script type="text/javascript">$("#awlpercent").animate({"width":"40px"});</script>

③sidebar.php
加入如下代码：

  1. <script type="text/javascript">$("#awlpercent").animate({"width":"94px"});</script>

④footer.php
加入如下代码

  1. <script type="text/javascript">
  2. $("#awlpercent").animate({"width":"100px"});
  3. setTimeout(function(){$("#awloading").hide(460)},1000);
  4. </script>

⑤style.css
加入如下代码

  1. /* Loading */
  2. #awloading {z-index:1;left:0;top:0;position:fixed}
  3.  
  4.  
  5. #awloading div {position:absolute}
  6. #awlfull, #awlpercent {-moz-border-radius-bottomright:5px;height:28px;-webkit-border-bottom-right-radius:5px;opacity:.6}
  7. #awlfull {background:#ECC779;width:100px}
  8. #awlpercent {background:#c44;width:6px;}
  9. #awlt {font-size:16px;z-index:2;width:100px;color:#fff;padding:5px 0 5px 9px}

学习至阿瓦，配图出处不详…