Some print.
Some print.

站点的顺序（分段）加载

by 19. on 2008-06-19

利用jQuery来控制WordPress的加载显示顺序.

因为我就想把页面的这些DIV先显示出来（不加载东西，只在里面写些LOADING之类的文字），之后在根据重要的和不重要的依次加载。或者比如我这个页面很多的无聊内容可我又不想去掉些什么，页面太杂乱（快成试验田了），上面的很多FLASH之类（或者很多人的TOP会有比较大的图片）。所以顺序从上到下加载等显示出posts就会花些时间，必要的是先显示出posts部分之后再从上到下依次显示，虽然加载的内容还是一样多，但是能控制他的打开顺序也不错，起码这样速度慢的时候也让人有个盼头。

当时在网络搜索了一下类似的顺序加载方法，搜索到最多的无非就是说比如：

1

<div id="top">- Loading... -</div>

之后在页面的最下部：

1
2
3
4
5

<div id="topLoading" style="display:none">- 需要加载的具体内容 -</div> 
 
<script type="text/javascript">
document.getElementById("top").innerHTML=document.getElementById("topLoading").innerHTML;
</script>

这样就可以把#top放在最后再加载了。这样做还是可以的，比如我先就把posts输出之后，footer里再把这些乱起八糟的都写上来输出top，sidebar这些。不过感觉效果不是特别好，还是想用jQuery。

我不知道我这想法对不对，因为试过了jQuery.load()和jQuery.ajax()这两个方法确实也能来用做顺序加载，但是这两个方法如果输出了JS输出的东西就会出错，比如我的FLASH是用JS输出的：

1
2
3
4

<script language="JavaScript">
var scrollWidth = document.body.scrollWidth;
writeflashhtml("_swf=http://www.ll19.com/glll/flash/new/FootFlash.swf?scrollWidth="+scrollWidth, "_height=45" ,"_wmode=transparent","_width=100%","_quality=high");
</script>

这样在我LOAD完这部分把他赋给对应的DIV时就会出问题，要么显示不出来要么光显示这部分这个页面反而没了（在FF和IE的情况），所以最后用了clone(true)这个方法。

API中clone(true)的解释：

元素以及其所有的事件处理并且选中这些克隆的副本，在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

true (Boolean) : 设置为true以便复制元素的所有事件处理。

所以就可以用这个判断是否加载完了一个文章了。

比如我的index页是类似这样写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 
<?php 
$showIndexPost = "";
?>
 
<div id="posts-<?php the_ID() ?>-text">人生很多时候是需要等待的,对吧。<font face="Tahoma" size="-3" style="padding: 10px 0 10px 0">| - For the post No.<?php the_ID() ?> - |</font><img src="http://www.ll19.com/glll/images/busy.gif"  border="0" /></div>
<div id="posts-<?php the_ID() ?>" style="display:none">
<?php the_content(); ?>
<h2><?php wp_link_pages(); ?></h2>
</div>
 
<script type="text/javascript">
<?php 
$showIndexPost .= "showPost".get_the_ID()."();"; 
?>
function showPost<?php the_ID() ?>(){
jQuery("#posts-<?php the_ID() ?>").clone(true);
jQuery("#posts-<?php the_ID() ?>-text").text("The No.<?php the_ID() ?> post loaded.").slideUp(2000);
jQuery("#posts-<?php the_ID() ?>").slideDown(2000); 
}
</script>

就是输出文章后输出这段JS来判断这文章是否加载完，如果加载完就slideDown()（通过高度变化（向下增大）来动态地显示所有匹配的元素。）显示出来这篇文章。

这里定义的$showIndexPost .= “showPost”.get_the_ID().”();”;
是为了当首页有多个文章要输出时候，把他们的方法全部放在$showIndexPost这个变量中，这样就可以很好的控制它显示的时间了，比如我再在index页加一段：

1

define('myShowJS', $showIndexPost);

之后我就可以在后面任何位置来执行这些显示post的方法了：

1
2
3

<script type="text/javascript">
<?php echo myShowJS ?>
</script>

我把这句放在footer中的一个位置，之后在它后面就写top啊sidebar啊要加载的内容，加一句：

1
2
3

<script type="text/javascript">
document.getElementById("top").innerHTML=document.getElementById("topLoading").innerHTML;
</script>

之类的JS就可以控制WP的加载显示顺序了。

{ Tags: , }

(查看之前文章)    »    |    (查看之后文章)    »    |


这篇文章发布于 2008年06月19日，星期四，9:19 下午，归类于 Collect。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。



2 Responses to “ 站点的顺序（分段）加载 ”

  1. Leeiio 说： ( Has commented 5 times in LL19.com )
    二月 5, 2009于2:44 下午

    寫完了blog上google 搜索“jquery 控制 内容 加载”檢驗 收錄情況發現了你這篇，果然更加強大，你站點用的js效果也很酷~

    回复 |  回复并邮件
  2. v堡娱乐网 说： ( Has commented 5 times in LL19.com )
    七月 19, 2008于10:56 下午

    试试

    回复 |  回复并邮件

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。