关于网页中图片可以预载的疑问？（图片是否真的可以预载）

[seeu1688]

很多Javascript书上都说用image对象对图像可以实现预载
比如：
var oImg = new Image;
oImg.src = "img/demo.jpg";
“教科书”上说这段代码可以将demo.jpg预先载入缓存中
...

...
<img id=imgid height=20 width=20>
然后用脚本
imgid.src = oImg.src就可以快速显示图片demo.jpg了
可测试的实际情况仍然发现执行的时候仍然是在进行http连接(状态栏显示如此)，且图片没有马上显现出。


困惑有时，思不得解，只得放此请人解惑了，多谢。

[seeu1688]

其实，确实是缓冲了，在IE的临时目录中却见demo.jpg
但奇怪的是，为何脚本执行时，没有马上显示，而仍然进行http连接，对该图片进行请求呢。

[tomelir]

嘿嘿，在网站上找的关于Javascript大都是一样效果方面的，
很少关于Javascript函数、对象方面的详细介绍，
你有关于这方面的好收藏吗?

[seeu1688]

这些方面的细节一来是使用之经验，二来是msdn的旁通。函数手册之类的大体不会论及极至。细微处只是经验的积累。没有收藏于文字。

这个预载的问题想必碰到人挺多，不知大家有否琢磨过，如何能真正预载图片，而实现不重复下载呢？不吝讨论。

多谢

[xlray]

up

[xlray]

noted...

[astra1]

可以使用DOM的createElement方法来解决
比如:

//新建一个IMG元素
var img=document.createElement("IMG");
//指定预载完成事件
img.onload=new Function("alert('image loaded!')");
……
//载入一幅图片
img.src="XXXX.XXX"

这样才是真正意义上的预载,载入后即使断线也仍可以使用


演示见
http://www.hengxie.com/download/imgpreloadtest/1.htm

[astra1]

上面是有关预载的技术

关于你的问题是这样
其实使用var oImg = new Image也可以实现图片预载

问题是出在
imgid.src = oImg.src
这一句,因为src属性只是存储了图片的URL,而非图片本身
所以这样做和imgid.src = "img/demo.jpg"是没有差别的,IE自然去重新读取图片了

正确的方法是
imgid.parentNode.replaceChild(oImg,imgid);