图片异步加载实现方法代码

个例子：
复制代码 代码如下:

当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？
ie、opera中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？
ff、chrom中，每点击一次加载一张该图片。

稍微修改下：
复制代码 代码如下:

运行后发现，奇怪的事情发生了。所有的浏览器都一致了，都是每点击一次加载一张图片。这又是什么原因？由此可以见 ie、opera 执行过程中并不是只触发一次 onload 事件！

联想一下 image 对象的一些属性看看，complete、readystate(ie专属值[uninitialized,complete]) （为防止缓存影响效果请更换图片名称！）
复制代码 代码如下:

经过以上测试，可以看出一些不同点，对于 complete 属性来讲，ie是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和ie的 readystate 属性的表现一致！
至此，可以肯定的是所有的浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？
众所周知，从缓存里加载东西的速度是很快的，那么在
...
img.src = isrc;
img.onload = ...
...
的过程中，难道 ie、opera 加载的速度快到，来不及追加事件？

这回加载一张根本不存在的图片看看效果：
复制代码 代码如下: