在javascript旋转木马中淡出后，当前图像会闪烁回来

我正在用javascript和jquery构建一个带有淡入/淡出动画的图像旋转木马

在下一个图像淡入之前，当前图像会短暂显示，尽管它已淡出。即使我使用onload来确保下一个图像的加载和大小正确，也会发生这种情况。 实时代码是：www.jbkphotographs.com/nepal.html

function moveToNextImg(){
    if(current === imgArray.length-1){
        current = 0;
    }
    else{
        current++;
    }
    updateIndex();

     //#imgWrapper is <div> that contains <img>
    $("#imgWrapper").fadeOut("slow",loadImg);
}


function loadImg(){

    imgName = imgArray[current].getAttribute("src");
    nextImg.src = imgName.replace("_Thumb","");

    nextImg.id = "currentImg";
    nextImg.onload =  function(){

        if((nextImg.height) > (nextImg.width)){
            nextImg.style.width = "42.5%"
        }

        else{
            nextImg.style.width = '750px';  
        }

        imgWrapper.appendChild(nextImg);


    }
    $("#imgWrapper").fadeIn("slow");
}

---

我看到了。在加载图像之前，图像中的淡入会产生这种效果

a你应该先预装图像，然后再滑动以获得fadein 衰减效应

b否则，将淡入效果置于加载状态 图像的回调：

function moveToNextImg(){
    if(current === imgArray.length-1){
        current = 0;
    }  else {
        current++;
    }
    updateIndex();

     //#imgWrapper is <div> that contains <img>
    $("#imgWrapper").fadeOut("slow",loadImg);
}


function loadImg(){

    imgName = imgArray[current].getAttribute("src");
    nextImg.src = imgName.replace("_Thumb","");

    nextImg.id = "currentImg";
    //This code will run only when images will be loaded
    nextImg.onload =  function(){

        if((nextImg.height) > (nextImg.width)){
            nextImg.style.width = "42.5%"
        }

        else{
            nextImg.style.width = '750px';  
        }

        imgWrapper.appendChild(nextImg);

        $("#imgWrapper").fadeIn("slow");
    }

    //any code here will run immediately before the onload runs
}

---

谢谢你的回答。快速提问：在我的原始代码中，fadeIn在onload之后出现。这难道不能确保fadeIn在加载映像后发生，即使它不包含在onload事件处理程序中吗？onload事件是异步的，它将在映像加载时运行，它与代码不是线性的，onload之外的所有内容都将立即运行