1

私は横スクロールのウェブサイトを持っており、スクロール位置に応じて画像を置き換えています。最初の画像スワップの時間になると、スクロール中にページを最初にロードすると、画像が消えてから再び表示されます。その後、問題は消えます。以下は私のjqueryコードです：

$(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');
  }
  });

画像がプリロードされていないためですか、それとも私のコードに問題がありますか?

テストサイトはこちらhttp://karpouzaki.com/fade/

どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

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 に依存していないため、ドキュメントの準備が整うまで待つ必要はありません。

于 2012-02-08T16:17:53.733 に答える