Question

我试图用javascript替换另一个图像，但是当我用chrome调试它时，我看到旧图像直到我的＃34; onload＆＃34; foo和图像实际上只有在退出时才会改变。我做错了什么？

以下是代码（此处为完整版http://dom.etogo.net/indexdb.jsp和http://dom.etogo.net/scripts/xmlimg.js）：

HTML：

<body>
<input type=submit value="Load another pic" onclick="loadAnotherPicture();">
<div id="outer">
    <div id="divtop">
         <img id="imgtop" class="main" src="/pics/dom/dom1.png">
    </div>
    <div id="divbottom">
         <img id="imgbottom" class="main" src="/pics/dom/dom2.png">
    </div>
</div>

JS：

var url="http://dom.etogo.net/getdbimg";
var imgSrc="";

var visibleTop=0;
var visibleBottom=1;
var nowVisible=visibleTop;

var topOpacity=100, bottomOpacity=0;

var divTop, divBottom, imgTop, imgBottom;
divTop=document.getElementById("divtop");
imgTop=document.getElementById("imgtop");
divBottom=document.getElementById("divbottom");
imgBottom=document.getElementById("imgbottom");

divTop.style.opacity=topOpacity/100;
divBottom.style.opacity=bottomOpacity/100;    

var changeInProgress=0;
function changeImage()
{
    if(!changeInProgress)
    {   return;
    }
    if(nowVisible==visibleTop)
    {   //change bottom img
        topOpacity=0;
        bottomOpacity=100;
        divBottom.style.opacity=bottomOpacity/100;
        divTop.style.opacity=topOpacity/100;
        nowVisible=visibleBottom;
    }
    else
    {   //change top img
        topOpacity=100;
        bottomOpacity=0;
        divTop.style.opacity=topOpacity/100;
        divBottom.style.opacity=bottomOpacity/100;
        nowVisible=visibleTop;
    }
    changeInProgress=0;
}
function loadAnotherPicture()
{
    if(changeInProgress ==0)
    {   var xmlHttp=new XMLHttpRequest();

        xmlHttp.onreadystatechange=function()
        {   if(xmlHttp.readyState==4 && xmlHttp.status==200)
            {   var xml=xmlHttp.responseXML;
                var imagesXML=xml.documentElement.getElementsByTagName("image");

                if(imagesXML==null) return;

                imgSrc=imagesXML[0].getElementsByTagName("url")[0].firstChild.nodeValue.trim();

                changeInProgress=1;
                if(nowVisible==visibleTop)
                {   //change bottom img
                    imgBottom.src=imgSrc;
                    imgBottom.onload=changeImage();
                }
                else
                {   //change top img
                    imgTop.src=imgSrc;
                    imgTop.onload=changeImage();
                }
            }
        }
        xmlHttp.open("GET", url);
        xmlHttp.send();
    }
}

所以，问题是，当调用changeImage（）时，我首先看到旧图片，然后在changeImage（）完成后更改为新图片。＆＃34;请帮忙＆＃34;

当用另一个替换时，Javascript显示旧图像

0 个答案: