javascript圖片預載入程式碼例項

admin發表於2017-03-09
JavaScript

當一個網站含有大量圖片的時候就可以出現載入困難，如果伺服器再不給力的話，可能影響使用者體驗，那麼圖片預載入功能就可以解決此問題，下面就提供一段程式碼例項供大家參考之用。

[HTML] 純文字檢視 複製程式碼
<!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');//這裡寫自己的動作吧， 
  } 
}

相關文章