关于JS中图片预加载问题

没有用呀，
因为2.GIF还没下载完成。必须要等待下载完毕后，再次刷新再有效。

<img name=img1 src=1.gif onclick="this.src=2.gif" width=n height=n>固定

试试在bady里onLoad预先加载2.gif

---------------
//声明一个数组，把图片地址预存进去
var imgname=new Array()
imgname[0]="1.jpg"
imgname[1]="2.jpg"//预读图片
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}

xjdawu 这招,我试过了.
不行,当二个图片大小相差很大时,还是老样子.
显示出第一幅图片的大小.有什么什么办法,判断,或等待图片加载完毕.继续求....

new image() 用这个方法.....<html>
<head>
<script language="javascript">
function preload(imgObj,imgSrc){
       eval(imgObj+'=new Image()');
       eval(imgObj+'.src="'+imgSrc+'"');
       }function ini(){
      //preload('imageA','14.jpg');
      //preload('imageB','15.jpg');
  //preload('imageC','16.jpg');
     // preload('imageD','15.jpg');
  //preload('imageE','14.jpg');
      //preload('imageF','15.jpg');
  //preload('imageG','14.jpg');
      //preload('imageH','15.jpg');
  //preload('imageI','14.jpg');
      //preload('imageJ','15.jpg');
  //preload('imageK','14.jpg');
      //preload('imageL','15.jpg');
      var theimage=new Array("14.jpg","15.jpg","16.jpg","2.jpg","8.jpg","11.jpg","22.jpg","23.jpg","33.jpg","35.jpg");
      var the_img=document.getElementById("img1");
// the_img.src=theimage[9];
  var thenum=Math.random();
  thenum=thenum*10;
  thenum=Math.floor(thenum);
   the_img.src=theimage[thenum];
  //getimgid();
} function getimgid(){
          var the_img=document.getElementById("img1");
  the_img.src=(the_img.src==imageA.src)?imageB.src:imageA.src;
       //   the_img.style.filter=alpha(opacity=90);
  window.setTimeout("getimgid()",3000);
// the_img.src=imageA.src;
  }  function img2small(){
  }
  </script>
</head>
<body onload='ini()'>
<img src='14.jpg' id='img1' width='200' style='filter:alpha(opacity=30)'/></body>
</html>

new image() 用这个方法实现加载.....<html>
<head>
<script language="javascript">
function preload(imgObj,imgSrc){
       eval(imgObj+'=new Image()');
       eval(imgObj+'.src="'+imgSrc+'"');
       }function ini(){
      //preload('imageA','14.jpg');
      //preload('imageB','15.jpg');
  //preload('imageC','16.jpg');
     // preload('imageD','15.jpg');
  //preload('imageE','14.jpg');
      //preload('imageF','15.jpg');
  //preload('imageG','14.jpg');
      //preload('imageH','15.jpg');
  //preload('imageI','14.jpg');
      //preload('imageJ','15.jpg');
  //preload('imageK','14.jpg');
      //preload('imageL','15.jpg');
      var theimage=new Array("14.jpg","15.jpg","16.jpg","2.jpg","8.jpg","11.jpg","22.jpg","23.jpg","33.jpg","35.jpg");
      var the_img=document.getElementById("img1");
// the_img.src=theimage[9];
  var thenum=Math.random();
  thenum=thenum*10;
  thenum=Math.floor(thenum);
   the_img.src=theimage[thenum];
  //getimgid();
} function getimgid(){
          var the_img=document.getElementById("img1");
  the_img.src=(the_img.src==imageA.src)?imageB.src:imageA.src;
       //   the_img.style.filter=alpha(opacity=90);
  window.setTimeout("getimgid()",3000);
// the_img.src=imageA.src;
  }  function img2small(){
  }
  </script>
</head>
<body onload='ini()'>
<img src='14.jpg' id='img1' width='200' style='filter:alpha(opacity=30)'/></body>
</html>

re 白夜花寒<img name=img1 src=1.gif onclick="this.src=2.gif">
当onclick的时候, img1 的 src 立即就变为了 2.gif
getimgid() 等于无效而2.gif的加载在
eval(imgObj+'=new Image()');
eval(imgObj+'.src="'+imgSrc+'"');
等效于
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]这个脚本,应该是翻转脚本不知道你有没有试过,如果第一幅是10*10 jpg 图
第二幅是 640*480 GIF 30帧动画
你翻转后,取宽度高度试一试.我试过 complete 属性,可还是不行.
complete 在第一次装载完毕时,就被置为true了.?????? 用timer 等待没错,可是用什么判断第二幅图已经显示上了呢?tks继续求.....

如果加载第二幅图片时足够慢的话，确实有这种现象
------------------------
<script>
function getWidth(objName) {
  if(eval(objName+".readyState") != 'complete'){
    setTimeout("getWidth('"+objName+"')",10)
    return
  }
  return eval(objName+".width")
}
</script>
<img name=img1 src=image/163.gif onclick="this.src='http://www.csdn.net/images/biaoshi.gif';alert(getWidth(this.name))">

xjdawu(左右互搏)
问题解决了,呵呵,要稍为改动一下,感谢。感谢大家。<script>
function getWidth(objName) {
  if(eval(objName+".readyState") != 'complete'){
    setTimeout("getWidth('"+objName+"')",10)
  }else {
   alert( eval(objName+".width") );
  }
}
</script>
<img name=img1 src=163.gif onclick="this.src='http://www.online99.net/pic_rf/rf_show3.JPG';getWidth(this.name)">

调试易

关于JS中图片预加载问题

解决方案 »