JS 实现图片预加载 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="jquery.js" type="text/javascript"></script>
<title>js 实现图片预加载 加载完后执行动作</title> 
</head> 
<style type="text/css"> 
<!--   
*html{  
 margin:0;  
 padding:0;  
 border:0;  
 }  
body{border:1px solid #f3f3f3; background:#fefefe}  
div#loading{  
  width:950px;  
  height:265px;  
  line-height:265px;  
  overflow:hidden;  
  position:relative;  
  text-align:center;  
}  
div#loading p{  
  position:static;  
  +position:absolute;  
  top:50%;  
  vertical-align:middle;  
} 

/*div#loading p img{  
  position:static;  
  +position:relative;  
  top:-50%;left:-50%;  
  vertical-align:middle  
} */ 
--> 
</style> 
<div id="loading"> 
     <p><img src="http://www.baidu.com/img/baidu_logo.gif" id="myimg" /></p> 
</div>
<script> 
imgarr[1]="http://image3.ituji.cn/ituji/content/2012/07/19/20/127659867016020120719202818/3427751613_1342701178.jpg";  
var Browser=new Object();  
Browser.userAgent=window.navigator.userAgent.toLowerCase();  
Browser.ie=/msie/.test(Browser.userAgent);  
Browser.Moz=/gecko/.test(Browser.userAgent);  
function SImage(url)  
{  
    var img = new Image();  
    if(Browser.ie){  
        img.onreadystatechange =function(){    
            if(img.readyState=="complete"||img.readyState=="loaded"){ 
			    $("#myimg").attr("src",url);
            }  
        }          
    }else if(Browser.Moz){  
        img.onload=function(){  
            if(img.complete==true){ 
			    $("#myimg").attr("src",url);
			}  
        }          
    }  
    img.src=url;  
}
icall(1);
function icall(v)  
{ 
  SImage(""+imgarr[v]+"");  
  $("#myimg").attr("src","loading.gif");
  /*if(v<c){  
      SImage(""+imgarr[v]+"",icall);  
  }else if(v>=c){  
      i=0;  
      //location.replace('banner.html');//这里写自己的动作吧，  
  }*/ 
}  
</script>
</body>
</html>

　　

posted @ 2012-09-14 18:39  简单--生活  阅读(415)  评论(0)    收藏  举报
简单--生活(CSDN)