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