注：以下内容基于IE中GIF的onload事件的基础上，故所有测试IE only
需要用到的几个图片
先看一个简单的事实：
复制代码 代码如下:
<SCRIPT LANGUAGE="JavaScript">
var img=new Image();
img.src="attachment/1178365293_0.gif";
img.onload=function()
{
alert("如要关闭请按住ESC键不放，并点击关闭按钮");
}
</SCRIPT>
如果不出所料的话你的IE应该弹出一大堆alert提示窗口了。注意是“一大堆”！
原因很简单：IE对多帧GIF的onload事件重复执行，即每播放完一次动画，就重新执行一次onload事件。
(注：按下ESC键会停止gif动画的播放，故也会停止onload事件执行)
利用这一特性我们可以模拟多线程的实现：
看下面的代码：
复制代码 代码如下:
image A onload执行次数：<span>0</span><br>
image B onload执行次数：<span>0</span><br>
image C onload执行次数：<span>0</span>
<script>
function Img(threadID,src)
{
var img = new Image;
img.onload = function()
{
var c = parseInt(document.getElementById(threadID).innerHTML);
document.getElementById(threadID).innerHTML=isNaN(c)?1:++c;
}
img.src = src;
return img;
}
var imgA = new Img("ThreadA","attachment/1178365293_0.gif");
var imgB = new Img("ThreadB","attachment/1178365293_1.gif");
var imgC = new Img("ThreadC","attachment/1178365293_2.gif");
</script>
是不是有点意思了？
再看下面的代码：
复制代码 代码如下:
<script>
//by Rimifon
var Threads = new Array;
onload = function()
{
for(var C=1;C<501;C++)
{
Threads.push(new Thread(C));
}
}
function Go(sender)
{
var IsStart = sender.value=="全部开始";
for(var x in Threads)
{
Threads[x].Start = IsStart;
}
sender.value = "全部" + (IsStart?"暂停":"开始");
}
function Thread(ID)
{
this.Start = 0;
var cursor = this;
var span = document.createElement("span");
var counter = document.createTextNode("0");
span.appendChild(counter);
var div = document.createElement("div");
div.appendChild(document.createTextNode("线程" + ID + "："));
div.style.cursor = "pointer";
div.onclick = function()
{
cursor.Start = !cursor.Start;
}
div.oncontextmenu = function()
{
img.onload = null;
this.removeNode(true);
return false;
}
div.appendChild(span);
document.body.appendChild(div);
var img = new Image;
img.onload = function()
{
if(cursor.Start) counter.data = parseInt(counter.data) + 1;
div.style.backgroundColor = cursor.Start?"#abcdef":"yellow";
}
img.src = "images/51js.gif";
}
</script>
<input type=button value="全部开始">
<input type=button value="弹出对话框">
部分代码引自Rimifon。(转载 )
JavaScript多线程编程简介
虽然有越来越多的网站在应用AJAX技术进行开发，但是构建一个复杂的AJAX应用仍然是一个难题。造成这些困难的主要原因是什么呢？是与服务器的异步通信问题？还是GUI程序设计问题呢？通常这两项工作都是由桌面程序来完成的，那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢？
AJAX 开发中的难题
让我们通过一个简单的例子来认识这个问题。假设你要建立一个树形结构的公告栏系统(BBS)，它可以根据用户请求与服务器进行交互，动态加载每篇文章的信息，而不是一次性从服务器载入所有文章信息。每篇文章有四个相关属性：系统中可以作为唯一标识的ID、发贴人姓名、文章内容以及包含其所有子文章ID的数组信息。首先假定有一个名为getArticle()的函数可以加载一篇文章信息。该函数接收的参数是要加载文章的ID，通过它可从服务器获取文章信息。它返回的对象包含与文章相关的四条属性：id，name，content和children。例程如下：
复制代码 代码如下:
function ( id ) {
var a = getArticle(id);
document.writeln(a.name + "" + a.content);
}
然而你也许会注意到，重复用同一个文章ID调用此函数，需要与服务器之间进行反复且无益的通信。想要解决这个问题，可以考虑使用函数 getArticleWithCache()，它相当于一个带有缓存能力的getArticle()。在这个例子中，getArticle()返回的数据只是作为一个全局变量被保存下来：
复制代码 代码如下:
var cache = {};
function getArticleWithCache ( id ) {
if ( !cache[id] ) {
cache[id] = getArticle(id);
}
return cache[id];
}
现在已将读入的文章缓存起来，让我们再来考虑一下函数backgroundLoad()，它应用我们上面提到的缓存机制加载所有文章信息。其用途是，当读者在阅读某篇文章时，从后台预加载它所有子文章。因为文章数据是树状结构的，所以很容易写一个递归的算法来遍历树并且加载所有的文章：
复制代码 代码如下: