0

開始時にすべての画像をロードしない単純な 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);

問題の考えられる原因

preload コメントの下の行は次の画像をロードする必要がありますが、以下で強調表示されているコードは、キャッシュされた画像を使用していないように見えますが、代わりにサーバーから再度プルしますか?

正しく動作.load()させるためにを使用する必要がありました.fadeIn()

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

1 に答える 1

2 
$(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 () {
   ....
})
于 2013-02-21T19:55:29.120 に答える