スクロール位置に応じてjqueryイメージを置換するのは、最初のロード後にのみ正しく動作します。

Question

私は水平スクロールのWebサイトを持っています。ページの最初の読み込み時にスクロールしている間に、最初のイメージスワップ時にイメージが消えてから再び表示されます。その後、問題は消えます。画像がプリロードされているか、または私のコードに問題があるされていないので、それは

$(window).scroll(function(){ 
if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() <= 1040)){ 
     $(".wrapper").css('background','url(img/naboutus.png) 95% top no-repeat fixed'); 
    } else if(($(window).scrollLeft() >= 1041)&& ($(window).scrollLeft() <= 2840)){ 
     $(".wrapper").css('background','url(img/nwhatwedo.png) 95% top no-repeat fixed'); 
    } else if(($(window).scrollLeft() >= 2841)&& ($(window).scrollLeft() <= 4640)){ 
     $(".wrapper").css('background','url(img/ntheory.png) 95% top no-repeat fixed'); 
    } else if(($(window).scrollLeft() >= 4641)&& ($(window).scrollLeft() <= 8424)){ 
     $(".wrapper").css('background','url(img/nportfolio.png) 95% top no-repeat fixed'); 
    } else if(($(window).scrollLeft() >= 8424)&& ($(window).scrollLeft() <= 11124)){ 
     $(".wrapper").css('background','url(img/nclients.png) 95% top no-repeat fixed'); 
    }else { 
     $(".wrapper").css('background','url(img/ncontacts.png) 95% top no-repeat fixed'); 
    } 
    }); 

です：以下は私のjqueryのコードはありますか？

テストサイトは上にある：http://karpouzaki.com/fade/

任意の助けをいただければ幸いです。

ありがとうございました

Answer 1

これは画像がプリロードされていないためです。あなたが本当に彼らがこのような場合には完了するまで待つ必要はありませんので、プリロード比較的単純な画像のためにこれを試してみてください：

$.each(["img/naboutus.png","img/nwhatwedo.png","img/ntheory.png","img/nportfolio.png","img/nclients.png","img/ncontacts.png"],function(i,url){ 
    var img = new Image(); 
    img.src = url; 
}); 

編集：また、あなたはすぐにこれを実行することができ、それがされるまで待つ必要はありません。ドキュメントはDOMに依存しないため、準備ができています。