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 回答