javascript - 带有异步加载图像的 jQuery 幻灯片循环

Question

我正在尝试创建一个简单的 jQuery 幻灯片，它不会在开始时加载所有图像，下一个要使用的图像将改为异步加载以减小页面大小。

我有幻灯片工作，但下一张图片的预加载似乎没有完全正常工作？

例子 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 () {
   ....
})