技术文章
当前位置:首页 > 技术文章

js判断图片是否加载完成

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js判断图片是否加载完成</title>
<meta name="keywords" content="js判断图片是否加载完成" />
<meta name="description" content="js判断图片是否加载完成,图片预加载,图片加载完成后再显示" />
</head>
<body>
<div id="msg"></div>
<script type="text/javascript">
var flg=0;
function SImage(callback)
{var img = new Image();this.img = img;
var appname = navigator.appName.toLowerCase();if (appname.indexOf("netscape") == -1)
{img.onreadystatechange = function () {if (img.readyState == "complete"){callback(img);}};
} else {img.onload = function () {if (img.complete == true){callback(img);}}}}
SImage.prototype.get = function (url){this.img.src = url;}
var img1 = new SImage(icall);
img1.get("http://www.lantou.net/web/jquery/01.jpg");
var img2 = new SImage(icall);
img2.get("http://www.lantou.net/web/jquery/02.jpg");
var img3 = new SImage(icall);
img3.get("http://www.lantou.net/web/jquery/03.jpg");
var img4 = new SImage(icall);
img4.get("http://www.lantou.net/web/jquery/04.jpg");
function icall(obj)
{flg=flg+1;if(flg==4){
 document.getElementById("msg").innerHTML="四张图片加载完成";
}}
</script>
</body>
</html>
js判断图片是否加载完成演示地址:
http://www.lantou.net/web/jquery/jq_tupian_yujiazai.html