判断图片是否重新加载成功问题？？？？？？？？？？？？？？？？

页面有个图片控件<img id="mypic" src="mypic.html">
我想通过js来让该控件刷新所显示的图片，并获取新图片的长宽信息,以下是问题的描述function getnew()
{
  var newimg=document.getElementById("mypic");
  newimg.src="mypic.html?12356";//路径没有变,加参数来刷新图片,此步骤没有出现任何问题.
  if（newimg.complete）//判断图片是否加载成功,估计问题出现在这里,但是不知道怎么处理
  {
    alert(newimg.height);//显示新图片的高度,但是总是显示旧图片的高度
    alert(newimg.width);//显示新图片的宽度,但是总是显示旧图片的宽度
  }
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不要用123456 用随即数   Math.random()
getnew();
function getnew()
{
   var newimg=document.getElementById("mypic");
   newimg.src="showimg.aspx?id="+Math.random();//路径没有变,加参数来刷新图片,此步骤没有出现任何问题.
    newimg.onload=function()
    {
    alert(newimg.height);//显示新图片的高度,但是总是显示旧图片的高度    alert(newimg.width);//显示新图片的宽度,但是总是显示旧图片的宽度
    }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<div id="counter"></div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript">
//*+----------------------------------------------
//* ImageLoader.js
//* To load outside images.
//* Copyright(C) By Michael Chen(www.jzchen.net)
//*-----------------------------------------------/****************************************************************************
* ImageLoader, v1.2
* To load outside images.
* I design this Class for preloading the images. Initially, I use 'this' but
*   faild. So I rewrite it as a static class. any body can give some help in
*   setTimeout("this.somefunc()") please mail me at [email protected]
*
* Usage:     ImageLoader.add("a.gif", "b.gif", "c.jpg", ...); // add others..
*            ImageLoader.onProgressChange = function() {...}
*            ImageLoader.onLoadFinish = function() {...}
*            ImageLoader.onTimeOut = somefunction;
*            ImageLoader.startLoad();
****************************************************************************/function ImageLoader() {}// Internal varibles definition
ImageLoader._preImages = new Array();
ImageLoader._imageUrlBuffer = new Array();
ImageLoader._currentID = 0;
ImageLoader._loaded = new Array();
ImageLoader._loadedNum = 0;
ImageLoader._currentLoading = "";
ImageLoader._timeOut = 30 * 1000;
ImageLoader._timeElapsed = 0;
ImageLoader._checkInterval = 50;// Event simulation
ImageLoader.onProgressChange = new Function();
ImageLoader.onLoadFinish = new Function();
ImageLoader.onTimeOut = new Function();/**
* Add images to the image array
* @param image1, image2, ...
* @return none
*/
ImageLoader.add = function() {
for (var i = ImageLoader._currentID; i < arguments.length; ImageLoader._currentID++,i++) {
if (arguments[i] != null || arguments[i] != "") {
ImageLoader._imageUrlBuffer[i] = arguments[i];
}
}
}

/**
* Get the Resouces count to be loaded
* @param none
* @return the number of resources to load.
*/
ImageLoader.getResourceCount = function() {
return ImageLoader._imageUrlBuffer.length;
}/**
* Get the  count of current loaded.
* @param none
* @return long the number of images that current loaded
*/
ImageLoader.getLoadedCount = function() {
return ImageLoader._loadedNum;
}/**
* Get the current loading image url
* @param none
* @return string the url of the current loading image.
*/
ImageLoader.getCurrentLoading = function() {
return ImageLoader._currentLoading;
}/**
* Set the timeout value. initial is 30 seconds.
* @param long millisecond time
* @return none
*/
ImageLoader.setTimeOut = function(ts) {
ImageLoader._timeOut = ts;
}/**
* Get the timeout value
* @param none
* @return int the timeout value
*/
ImageLoader.getTimeOut = function() {
return ImageLoader._timeOut;
}/**
* Start to load the images.
* @param none
* @return none
*/
ImageLoader.startLoad = function() {
for (var i = 0; i < ImageLoader._imageUrlBuffer.length; i++) {
ImageLoader._preImages[i] = new Image();
ImageLoader._preImages[i].src = ImageLoader._imageUrlBuffer[i];
ImageLoader._loaded[i] = false;
}
ImageLoader.checkLoad();
}/*-
* checkLoad
* Internal use only.
* Do not use it directly. otherwise will encount an error.
*/
ImageLoader.checkLoad = function() {
if (ImageLoader._loadedNum == ImageLoader._preImages.length) {
ImageLoader.onLoadFinish();
return;
} if (ImageLoader._timeElapsed >= ImageLoader._timeOut) {
ImageLoader.onTimeOut();
return;
} for (i = 0; i < ImageLoader._preImages.length; i++) {
if (ImageLoader._loaded[i] == false && ImageLoader._preImages[i].complete) {
ImageLoader._loaded[i] = true;
ImageLoader._currentLoading = ImageLoader._imageUrlBuffer[i];
ImageLoader._loadedNum++;
ImageLoader.onProgressChange();
}
}

ImageLoader._timeElapsed += ImageLoader._checkInterval; setTimeout("ImageLoader.checkLoad()", ImageLoader._checkInterval);
}
</script>
</head><body>
<h1>ImageLoader Usage Demo</h1>
<input type="text" id="abc" size="100"/>
<script language="JavaScript">

</script></body>
</html>
<html>
<head>
<title>IE图片预加载类</title>
<script language="javascript">
function LoadImageClass()
{
var me = this;
var a = []; //图片数组
this.Idx = 0; //已经被加载的图片个数
this.Num = 0; //图片总数 //下载图片
this.LoadImages = function(s)
{
a = s.split(",");
this.Num = a.length;
DownImg();
} function DownImg()
{
var i=new Image();
var f = true;
i.onload= function()
{
if (f)
{
f = false
me.Idx++;
if (me.LoadIng) me.LoadIng();
if (me.Idx<me.Num) DownImg();
else if(me.CallBack) me.CallBack(a);
}
}
i.src = a[me.Idx];
}
}
</script>
</head>
<body>
<div id="counter" style="position:absolute; z-index:98; left:expression(document.body.clientWidth/2-60); top:expression(document.body.clientHeight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;">图片加载中...</div>
<div id="divPageMask" style="position:absolute; z-index:99; left:0px; top:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight); background:black; filter:alpha(opacity=50);"></div>
<div id="box"></div><script language="javascript">
var o = document.getElementById("counter");
var t=new LoadImageClass();
t.LoadIng = function() { o.innerHTML="加载进度："+Math.floor(t.Idx/t.Num*100)+"%" };
t.CallBack = function(arr)
{
window.setTimeout(function(){o.style.display='none';alert('图片加载完毕！')},1000);
document.getElementById('divPageMask').style.display='none';
var str="";
for(var i=0;i<arr.length;i++)
{
str+='<img src="'+arr[i]+'" /><br/>';
}
document.getElementById("box").innerHTML=str;
}
t.LoadImages('http://www.baidu.com/img/logo-yy.gif,http://bbs.51js.com/images/default/logo.gif,http://www.programbbs.com/bbs/uploadFace/46_2006910934216927.gif,http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg,http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg,http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg');
</script>
</body>
</html>
如果你是要实现每次刷新的时候出现新的图片，那你就应该用 ajax 来做。
如果不是要新图片，就用 3楼的方法就可以了。