如何快速打开页面，然后逐步加载DIV的内容？

Question

我想用YAHOO API做一个小站。网站结构是横版布局，有4个DIV并列排列，由于API分析JSON数据，到获得结果的速度比较慢。所有我想分加一个页面局部加载的功能。
我想要的效果是：快速打开页面，加载header和footer部分。然后从左边第一个DIV开始加载；第一个DIV加载完毕后，加载第二个DIV；第二个DIV加载完毕后，加载第三个DIV；第三DIV个加载完毕后，加载第四个DIV；
求一个详细可行的方法，希望能得到一组推荐代码，或一个DEMO的教程。谢谢。body,html{width:100%;overflow-x:hidden;}
*{margin:0;padidng:0;}
#wrap{width:1000px;margin:0 auto;}
.content{float:left;width:250px;}<div id="wrap">
  <div class="content" id="yahoo1">
    <?php
       url="http://boss.yahooapis.com/ysearch/web/v1/jquery?appid={api-id}"
       ...
       $data = json_decode($body);
       foreach ($data->ysearchresponse->resultset_web as $result){
       ...//输出搜索结果
       }
  </div>
  <div class="content" id="yahoo2">
       url="http://boss.yahooapis.com/ysearch/images/v1/jquery?appid={api-id}"
       ...
       $data = json_decode($body);
       foreach ($data->ysearchresponse->resultset_images as $result){
       ...//输出搜索结果
       }
  </div>
  <div class="content" id="yahoo3">
       url="http://boss.yahooapis.com/ysearch/web/v1/php?appid={api-id}"
       ...
       $data = json_decode($body);
       foreach ($data->ysearchresponse->resultset_web as $result){
       ...//输出搜索结果
       }
  </div>
  <div class="content" id="yahoo4">
       url="http://boss.yahooapis.com/ysearch/images/v1/php?appid={api-id}"
       ...
       $data = json_decode($body);
       foreach ($data->ysearchresponse->resultset_images as $result){
       ...//输出搜索结果
       }
  </div>
</div>

Answer 1

因为代码是php的，所以必须在服务器端把4个json 执行完毕后才传送给浏览器，这个过程耗费时间多。所以建议把4个都改成iframe ,4个文件嵌入网页，这个这4个部分将同时执行，而且执行的快慢不影响主页面的显示速度。

Answer 2

写成4个IFRAME？那样是不是需要做4个外部页面，然后逐步加载进主页面？
这样的话，还不如用jquery.load，所有代码写进一个外部页面，然后按DIV的ID名逐个加载。但是我现在，会需要很多个这样的页面，如果每一个页面都要派生2个页面的话，制作时的效率实在太低了点。
谁还有没有更好一点的办法？谢谢。

Answer 3

你把访问api的php代码独立一份文件，根据url中的参数访问不同的api，并把结果打印。
然后ajax向这个php文件顺序请求4次(上次ajax成功回调函数里再发起第下次次ajax请求),由js回调函数在页面展示。

Answer 4

你把访问api的php代码独立一份文件，根据url中的参数访问不同的api，并把结果打印。
有没有教程啊？
想比较一下，有没有jquery.load容易？