你的位置:首页 > Java教程

[Java教程]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/