jquery 图像替换取决于滚动位置仅在第一次加载后才能正常工作

发布于 2025-01-03 16:34:53 字数 1327 浏览 1 评论 0原文

我有一个水平滚动网站，根据滚动位置我有一个图像替换。第一次加载页面时，当您滚动时，当第一个图像交换时，图像会消失然后重新出现。之后问题就消失了。下面是我的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/

如有任何帮助，我们将不胜感激。

谢谢

原文

I have a horizontal scrolling website and depending on the scroll position I have an image replacement. On first load of page while you scroll when it is time for the first image swap the image dissappears and then reappears. After that the problem dissapears. Below is my jquery code:

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

Is it because the images are not preloaded or is there a problem in my code?

The test site is on: http://karpouzaki.com/fade/

Any help would be appreciated.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻的味道 2025-01-10 16:34:53

这是因为图像没有预加载。尝试使用此方法进行相对简单的图像预加载，因为在这种情况下您实际上不需要等到它们完成：

$.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。

That is because the images aren't preloaded. Try this for relatively simple image preloading since you don't really need to wait until they are done in this case:

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

Edit: Also, you can run this immediately, it doesn't have to wait until the document is ready since it doesn't rely on any DOM.

回复收藏 0 原文

~没有更多了~