JS图片预加载-优快云博客

本文链接：https://blog.youkuaiyun.com/linwins/article/details/6163964

本文介绍了一个使用JavaScript实现的图片预加载方法，通过动态监测图片加载状态，在所有指定图片加载完毕后执行特定动作，如页面跳转等。该方法兼容IE和其他主流浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=gb2312"
 
/>
 
<
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"
 
/>
</
p
>
 
</
div
>
 
<
script
>
 
var 
i
=
0
;  
var 
c
=
3
;  
var 
imgarr
=
new
 Array  
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif";  
imgarr[1]="http://img.baidu.com/img/logo-img.gif";  
imgarr[2]="http://img.baidu.com/img/logo-zhidao.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"){  
                
i
i
=i+1;  
    callback(i);  
            }  
        }          
    }else if(Browser.Moz){  
        
img.onload
=
function
(){  
            if(
img.complete
==true){  
                
i
i
=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');//这里写自己的动作吧，  
  }  
}