预缓存图象技术

首先：预载图片“
var a = new Image();a.src="a.gif";
var b = new Image();b.src="b.gif"
................然后利用JS，调用a,b

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

预载图片是肯定没有什么问题的，关键就是这个调用。我说过了，我的图象不是固定的，是通过不断写新的代码来更新Layer1.innerHTML，从而使用户感到他点击一下，树是伸开或是合拢的。
现在的核心问题就是树是变化的，这样需要接受图片的控件的个数也是变化的，也就是说不能预先在HTML中写一个IMG控件来接受已经下载下来的图片。这种情况下，怎么使用预缓存图象技术？
举个具体点的例子吧：
s+="<IMG SRC=\""+Icon+"\" HEIGHT=12 WIDTH=12 BORDER=0></A>";
s+=" <A HREF=\"javascript:void(0)\" onClick=\"UserChoose("+i+")\" >"+P[i].Name+"</A><BR>";
将以上生成的s串赋给Layer1.innerHTML，这样一个树形图就出来了。
树的每一个节点信息都存储在数组P中。第一句话中的Icon就是要从服务器下载的小图片，那这个Icon值怎么给呢？总不能象我前面提到的，用类似这样的语句赋值吧：document.A.src=B.src。
所以，现在关键的问题就是这个Icon值怎么给。
生成一个结点,响应的生成一系列有共同ID的属性<input type=hidden>
收缩或者展开读取相应的属性就可以了...那些 + - 或者没有结点的图片根据从数据库读出来的时候就应该判断是否有子结点了,
当你生成新的树的时候,默认只有第一层显示,调用打开其父结点的过程就可以了..function openNode(num)  //展开或关闭树
{
if(num==-1)  return
if(OpenedNode==1)
{
var pid=document.all("parent"+num).value;
        if(!isBlank(document.all("div"+num).innerHTML))
          document.all("img"+num).src="images/2.gif";
document.all("div"+num).style.display="";
    if(parseInt(pid)>-1)
   openNode(pid);
else
   OpenedNode=0;
        return
}
else
{
         if(isBlank(document.all("div"+num).innerHTML)) return
if(document.all("div"+num).style.display=="none")
  {
    document.all("img"+num).src="images/2.gif";
    document.all("div"+num).style.display="";
  }
else
  {
    document.all("img"+num).src="images/1.gif";
    document.all("div"+num).style.display="none";
  }
}
}
不知道你的问题出在哪里？
预缓存读入3个图片是没有问题的。哪怕不用js，你写三个<img src="a.gif" width="0">也是可以的。
你说如何赋值？但是你的树怎么生成？生成后的树每个节点总有属性保存她的状态吧——展开、收拢和不可展开。既然你的树可以生成，却不可赋值？我难以理解！在树生成的时候，你不会就把src赋好值嘛！
我想你的树的改变有两种模式，一种是一次性生成（如全部展开、全部收拢），另一种是部分改变（点击某个节点），无论如何，你都有函数来完成这件事。那么像楼上的例子不是很明白的展示了前一种情况吗？
我不知道你的问题到底有何而来？
写三个<img  src="a.gif"  width="0">是可以的，我前面没说这不行，而且我也是这么做的。
每次用户一点击，我都会重新生成一段语句，然后把它赋给Layer1.innerHTML，Layer1是我jsp上的一个层。那段语句呢，大概就如同下面这样：
s+="<IMG  SRC=\""+Icon+"\"  HEIGHT=12  WIDTH=12 BORDER=0></A>";
s+="  <A  HREF=\"javascript:void(0)\"  onClick=\"UserChoose("+i+")\">"+P[i].Name+"</A><BR>";
这段语句只生成一个节点的，还有其他的就不写了。我是根据当前节点是什么样的来给上面这段语句中的Icon来赋图片。取图片是这样写的：
var image1=new Image(12,12);
image1.src="/images/A.gif";
var image2=new Image(12,12);
image2.src="/images/B.gif";
var image3=new Image(12,12);
image3.src="/images/C.gif";可是把image1.src、image2.src或image3.src真接赋给Icon就不行，预缓存图象技术就根本体现不出来，用户每次一改变当前树形状，就会看到状态栏提示正从服务器上下载图片。你说怎么办？
我在ie上运行下面这个小程序来模拟你所说的情况，没有问题啊！
我还特地把图片换成1M的png，也没有问题啊！预缓存完全成功啊！<html>
<head>
<style type="text/css">
img { border:none }
</style>
<script type="text/javascript">
function RefreshTree()
{
  s="";
  for (i=0; i<20; i++)
  {
// 通过获得一个0到2之间的随机整数来生成一个状态随机的节点。    n=Math.floor(Math.random()*3);    s+="<a href='javascript:RefreshTree()'><img src='"+n+".gif'></a><br>";
  }
  MyTree.innerHTML=s;
}
</script>
</head>
<body>
<img src="0.gif" width="0"/>
<img src="1.gif" width="0" />
<img src="2.gif" width="0" />
<br>
Tree:
<div id="MyTree">
</div>
<button onclick="RefreshTree()">Refresh my tree...</button></body>
</html>
没有类似下面的语句：
var image1=new Image(12,12);
能称得上预缓存图象技术吗？你上面语句中的三句：
<img src="0.gif" width="0"/>
<img src="1.gif" width="0" />
<img src="2.gif" width="0" />
有什么作用呢？
你前面还说“写三个<img  src="a.gif"  width="0">是可以的，我前面没说这不行，而且我也是这么做的。”
你到底看明白了没有？
预缓存不过就是预先调入后面要用到的图片，使用new Image和<img width="0">起到作用是一样的。其实在你的例子中，并不一定要使用预缓存，因为这种状态图片通常都很小，可能只有几百字节。
我前面说的“写三个<img  src="a.gif"  width="0">”，是指在JavaScript中这么写的：
var image1=new Image(12,12);
image1.src="/images/a.gif";
var image2=new Image(12,12);
image2.src="/images/b.gif";
var image3=new Image(12,12);
image3.src="/images/c.gif";
可能是我想简便一点，没说太明白，sorry！因为我看过的所有的关于预缓存资料都必有类似这样的一句话的：
var image1=new Image(12,12);
你的意思是你的例子中的：
<img src="0.gif" width="0"/>
<img src="1.gif" width="0" />
<img src="2.gif" width="0" />
可以代替上面那句话吗？可我总觉得你这三句话可有可无，因为在你的这句话中：s+="<a href='javascript:RefreshTree()'><img src='"+n+".gif'></a>
其实就是直接把图片拿来用了，实在没觉得你用到了预缓存，烦解释清楚。图片是很小，但是如果不用预缓存，用户每点一下，就会看到状态栏中写着还有多少多少项要下载，很烦人，所以最好用。
我做过一个和你一样需求的树，在添加节点的时候我是这样的。....
loHTML[loHTML.length] = "src=" +　mo_ImageIcon[i].src;　//mo_ImageIcon是全局变量，缓存过的图型数组。
.....
var loThisOBJ = document.createElement("DIV");
with (loThisOBJ){
id = "Node_" + lsNodeID;
innerHTML = speedStr(loHTML); 　//speedStr是字符串累加加速处理
}
loAddOBJ.appendChild(loThisOBJ);　//loAddOBJ是容纳状态图标和文字连接之类的元素对象，每个节点都被loAddOBJ包裹。
.......这样下来，速度会快很多，而且状态栏看不到下载的过程。
我也实在弄不懂你究竟有什幺问题﹐现在姑且说一下我的看法﹐据我所知﹐当你访问一个网页时如果要下载图片﹐那幺IE浏览器(其它浏览器不知道)就会把该图片下载到临时存放文件夹﹐再读入﹐如果你再在同一网页遇到该图片时(也就是说同一网址同一图片名)﹐IE就会直接在本地硬盘读取(有点接近预缓存)﹐而你现在就是这个情况﹐所以<a href=image_name> 并非每次都是到server端读取的﹐而你也不必在这个結点上死转牛角尖﹐我不知道我的认识有没有错﹐不一定准确。
liuzxit的说法很对。这也是我为什么说用<img width='0'>就可以了。如果你一定要去掉“还有多少项下载”之类的（俺的测试程序在ie6下没有此类信息），用懒猫的方法应该可以的（虽然我没有试过），因为他是append了同一个对象上去。预缓存一般用来处理按钮上的图片切换，你的例子实在是不必用的。