javascript图片预加载代码范例

javascript图片预加载代码实例

javascript图片预加载代码实例:
当一个网站含有大量图片的时候就可以出现加载困难，如果服务器再不给力的话，可能影响用户体验，那么图片预加载功能就可以解决此问题，下面就提供一段代码实例供大家参考之用。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>图片预加载代码-蚂蚁部落</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">
  <img src="img/logo.gif" />
</div>
<script type="text/javascript"> 
var i=0; 
var c=3; 
var imgarr=new Array 
imgarr[0]="img/1.gif"; 
imgarr[1]="img/2.gif"; 
imgarr[2]="img/3.gif"; 
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,callback) 
{ 
  var img = new Image(); 
  if(Browser.ie)
  { 
    img.onreadystatechange=function()
    { 
      if(img.readyState=="complete"||img.readyState=="loaded")
      { 
        ii=i+1; 
        callback(i); 
      } 
    } 
  }
  else if(Browser.Moz)
  { 
    img.onload=function()
    { 
      if(img.complete==true)
      { 
        ii=i+1; 
        callback(i); 
      } 
    } 
  } 
  img.src=url; 
} 
function icall(v) 
{ 
  if(v<c)
  { 
    SImage(""+imgarr[v]+"",icall); 
  } 
  else if(v>=c)
  { 
    i=0; 
    //location.replace('banner.html');//这里写自己的动作吧， 
  } 
}

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8363

更多内容可以参阅:http://www.softwhy.com/javascript/

javascript图片预加载代码范例

相关推荐