javascript图片预加载代码

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

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<head>
<title>图片预加载代码-51前端</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');//这里写自己的动作吧， 
  } 
}

代码描述：javascript 图片预加载。javascript图片预加载代码

下载全部收藏

140 187

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册