利用Javascript实现较慢代码的延迟加载

2008 10 15 05:20 PM 3830次查看

分类：JavaScript 标签：JavaScript

先介绍下原理吧。

浏览器会按照标签依次向下解析，每解析一个，就显示一个的内容。
而Javascript可以更改标签内的内容，可以实现将已经显示过的少量预览内容，在全部加载完后变成完整内容。

方法如下：

1.在需要插入JS的地方插入以下代码：
<span id=wait1>LOADING...</span>
那个LOADING…你可以换成其他话或者自己喜欢的小图片。

2.然后在页面最底端插入：
<span class=spanclass id=wait2>
你的JS代码在这里!</span>
<script>wait1.innerHTML=wait2.innerHTML;wait2.innerHTML="";</script>
附送一个修改比酷的例子（请自行备份原文件）：

注意：
这种方式可能造成一些特效失效，如不切换图片、鼠标无法切换排名，原因是比酷使用了{subject}，可以用如下方法来修改：

1.打开模版disucz.htm，找到原来的比酷插件代码（你的可能和我不一样）：
{eval request('bekuushow');}
2.替换为：
<span id=bekuu>
	<center>
			正在加载快速浏览页面，请稍后
			<img src="images/default/loading.gif" />
	</center>
</span>
这里加载了一个小图，你可以找任意的图片替换images/default/loading.gif，或改成其他路径；如果你不用的话，可以删掉这句。

3.在页面底部，即{subtemplate footer}后面（如果要符合规范性，应该放在前面，因为footer模板有html的结束标记）加入如下代码：
<span class=spanclass id=wait_bekuu>
	<script type="text/javascript">
		{eval request('bekuushow');}
	</script>
</span>
<script type="text/javascript">
	bekuu.innerHTML=wait_bekuu.innerHTML;
	wait_bekuu.innerHTML="";
</script>
4.如果效果没出来，去后台刷新下缓存。

1条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论，或者点这里禁止自动加载。

    想说点什么呢？