Текущее изображение мерцает назад после исчезновения в карусели javascript

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

Я видел его. У вас есть такие эффекты, потому что вы теряете изображение до его загрузки.

а) Вы должны предварительно загружать изображения, прежде чем скользнуть иметь FADEOUT силу по FadeIn

б) В противном случае положить эффект плавного увеличения громкости в 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 
}