博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

利用js预缓存图片

Posted on 2009-05-04 14:46  SunTin(子锡)的博客,asp, .net,Ajax,JavaScript,php  阅读(1542)  评论(1编辑  收藏  举报

利用js预缓存图片,请看代码

<span id="loadtxt" style="display:none">正在加载...</span>
<img name="loadimg">
<select name="select" onchange="imgLoad(this)">
  <option value="1">Image1</option>
  <option value="2">Image2</option>
  <option value="3">Image3</option>
  <option value="4">Image4</option>
</select>
<script language="javascript">
var imgsrc=new Array();
imgsrc[1]="http://t6.baidu.com/it/u=2560653164,2154517447&gp=34.jpg";
imgsrc[2]="http://t4.baidu.com/it/u=2938696448,1280555173&gp=4.jpg";
imgsrc[3]="http://t1.baidu.com/it/u=1655407454,2687003786&gp=30.jpg";
imgsrc[4]="http://t4.baidu.com/it/u=3791483135,1943780984&gp=26.jpg";
var img=new Image(160,120);
function imgLoad(list){
 loadtxt.style.display="";
 loadimg.style.display="none";
 if(list){
  var listId=list.options[list.selectedIndex].value
 }else{
  var listId=1;
 } 
 img.src=imgsrc[listId];
 img.onload=limg;
 
}
function limg(){
 loadtxt.style.display="none";
 loadimg.style.display="";
 document.loadimg.src=img.src;
}
imgLoad();
</script>