Question

我正在使用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");
}

Answer 1

我看到了。你有这种效果，因为你在图像加载之前就已经消失了。

a）你应该预先加载图像，然后再滑动以获得fadein 淡出效果

b）否则将淡入效果置于onload中回调图像：

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
}

在javascript轮播淡出后，当前图像闪烁回来

1 个答案: