Fading Image Slider

Question

Я пытаюсь увязать изображения друг с другом. Я не уверен, что лучше предварительно загрузить изображение перед рукой или нет. Довольно много того, что происходит, что замирания удара полностью белый фон прежде, чем исчезнуть в следующем изображении, но я хочу, чтобы исчезнуть немедленно, вместо того, чтобы показывать белый фон - если это имеет смысл:

$(document).ready(function() { 
    var $next, 
     cycle; 
    var i = 0; 
    var imgArr = ['1.jpg', '2.jpg', '3.jpg']; 

    $activeLi = $("#slideshow li"); 
    $activeLi.html('<img src="images/' + imgArr[i] + '" />'); 
    cycle = setInterval(change_img, 1000); 

    function change_img(){ 
     clearInterval(cycle); 
     $activeLi.find('img').fadeOut('slow', function(){ 
      $activeLi.html('<img src="images/' + imgArr[i] + '" />').fadeIn('slow'); 
     }); 

     i = (i == (imgArr.length - 1)) ? 0 : ++i; 
     cycle = setInterval(change_img, 1000); 
    } 
}); 

Также это лучше prealod мои изображения, прежде чем они исчезают?

JSFiddle

Мое решение (Какой измученный я начал вслед ствие вопрос ...)

$(document).ready(function() { 
    var $next, 
     cycle; 
    var i = 0; 
    var durTimer = 2000; 
    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; 

    $activeLi = $("#slideshow li"); 
    $activeLi.first().html('<img src="images/' + imgArr[0] + '" />'); 
    cycle = setInterval(change_img, durTimer); 

    function change_img(){ 
     clearInterval(cycle); 
     var nxtImg = (i == imgArr.length) ? 1 : i; 
     $activeLi.last().html('<img src="images/' + imgArr[nxtImg] + '" />'); 
     $activeLi.find('img').animate({opacity:0}, {duration: durTimer}); 

     i = (i == (imgArr.length - 1)) ? 0 : ++i; 
     $activeLi.first().html('<img src="images/' + imgArr[i] + '" />'); 
     cycle = setInterval(change_img, durTimer); 
    } 
}); 

Answer 1

Если у вас есть ограниченное количество изображений, то лучше, чтобы загрузить все из них на загрузка страницы.

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

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

1. Вместо одного тега img добавьте три тега img (из вашего кода есть три изображения).
2. Начните анимацию fadeOut и fadeIn за раз.
3. fadeOut для текущего изображения и fadeIn для следующего изображения.

Это не будет отображаться на белом фоне.

Я уже создал небольшую демонстрацию для этого.

Проверьте это: http://db.tt/q8VPb03U