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

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

1 个答案: