<!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=utf-8" /> <script src="jquery.js" type="text/javascript"></script> <title>js 实现图片预加载 加载完后执行动作</title> </head> <style type="text/css"> <!-- *html{ margin:0; padding:0; border:0; } body{border:1px solid #f3f3f3; background:#fefefe} div#loading{ 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" id="myimg" /></p> </div> <script> imgarr[1]="http://image3.ituji.cn/ituji/content/2012/07/19/20/127659867016020120719202818/3427751613_1342701178.jpg"; 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) { var img = new Image(); if(Browser.ie){ img.onreadystatechange =function(){ if(img.readyState=="complete"||img.readyState=="loaded"){ $("#myimg").attr("src",url); } } }else if(Browser.Moz){ img.onload=function(){ if(img.complete==true){ $("#myimg").attr("src",url); } } } img.src=url; } icall(1); function icall(v) { SImage(""+imgarr[v]+""); $("#myimg").attr("src","loading.gif"); /*if(v<c){ SImage(""+imgarr[v]+"",icall); }else if(v>=c){ i=0; //location.replace('banner.html');//这里写自己的动作吧, }*/ } </script> </body> </html>