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>

  

你可能感兴趣的:(js)