Javascript在替换为另一个img时显示旧img_Javascript_Html

Javascript在替换为另一个img时显示旧img

javascript html

Javascript在替换为另一个img时显示旧img,javascript,html,Javascript,Html,我试图使用javascript将一个图像替换为另一个图像，但当我在chrome中调试它时，我会看到旧图像，直到我的“onload”foo结束，并且该图像实际上只有在退出时才会更改。我做错了什么以下是代码（完整版本和）： html: 所以，问题是，当调用changeImage（）时，我首先看到旧图片，在changeImage（）完成后，它会变成新图片。“请帮助”只有在使用调试器中断时才会发生这种情况？为什么会出现这样的问题？在loadAnotherPicture（）中，您没有指定url值。不，它

我试图使用javascript将一个图像替换为另一个图像，但当我在chrome中调试它时，我会看到旧图像，直到我的“onload”foo结束，并且该图像实际上只有在退出时才会更改。我做错了什么

以下是代码（完整版本和）：

html:

所以，问题是，当调用changeImage（）时，我首先看到旧图片，在changeImage（）完成后，它会变成新图片。“请帮助”

只有在使用调试器中断时才会发生这种情况？为什么会出现这样的问题？在loadAnotherPicture（）中，您没有指定url值。不，它总是闪烁（首先显示旧的img），但在调试器中，我可以看到为什么先前指定了.url，img加载得很好。问题是，旧的img会变为可见，只有在变为新的img之后，它才会变为可见。我发现Image.onload无法按预期工作。它是在图像还没有实际加载时调用的（.complete为false）只是想知道，它应该是这样吗？

<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>

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();
    }
}