jQuery цикл слайд-шоу с асинхронно загруженными изображениями

Question

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

У меня есть слайд-шоу, но предварительная загрузка следующего изображения, похоже, не работает полностью?

Exaple JQuery

var i = 2; 
var total = 9; 

var obj = setInterval(function(){  

    $(".slides_container img").fadeOut("slow", function(){ 
     $(this).attr("src" ,"/images/slide-" + i + ".jpg").load(function() { 
      $(this).fadeIn(); 
     }); 
    }); 

    if(i < total){ 
     i++; 
     //Preload Next Image 
     (new Image()).src = "/images/slide-" + i + ".jpg"; 
    } 
    else 
     i = 1; 
}, 4000); 

Возможная причина проблемы

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

Я должен был использовать .load() сделать .fadeIn() работу правильно

$(this).attr("src" ,"/images/slide-" + i + ".jpg").load(function() { 
    $(this).fadeIn(); 
}); 

Answer 1

$(this).attr("src" ,"/images/slide-" + i + ".jpg").load(function() { 
    $(this).fadeIn(); 
}); 

Должно быть:

$(this).load(function() { 
    $(this).fadeIn(); 
}); 

$(this).attr("src" ,"/images/slide-" + i + ".jpg") 

Или попробуйте::

$(this).onload = function() { 
    .... 
})