Some print.
Some print.
分类归档: Collect Page 5 of 10

站点的顺序（分段）加载

By19.Published on2008-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的加载显示顺序了。

(全文…)

{ 2 comments } { Tags: , }

Twitter Badges-我的唠叨.

By19.Published on2007-09-19.

更改自官方的“个人版”唠叨Flash-Twitter Badges.

- Twitter_Badges-我的唠叨.-

twitter.com以及和其类似的”唠叨”现在已经很多了，国内的比如饭否~这个是Twitter提供的一个在个人站上展示自己唠叨的FLASH，我把它改了一下 －。－，成了一”纯个人版”…因为原有的在显示中文等方面有缺陷，并且用自己改的也方便 (起码可以改的个性点)。如果你只是想记录下这些乱七八糟的废话，那就直接在自己站的这个FLASH上添加。上面的”+”按钮改成了添加唠叨，输入内容密码提交便可。

建表语句……

1
2
3
4
5
6

CREATE TABLE `glll_twitter` (
`twitterid` bigint(20) NOT NULL auto_increment,
`created_at` varchar(50) NOT NULL default '',
`text` varchar(200) NOT NULL default '',
PRIMARY KEY  (`twitterid`)
) TYPE=MyISAM;

~提供源文~：
…/GLLL_teitter.rar

(全文…)

{ 5 comments } { Tags: , }
Page 5 of 10« First...345678...Last »