Замена изображения jquery в зависимости от положения прокрутки работает правильно только после первой загрузки - PullRequest
Новая
       44

Замена изображения jquery в зависимости от положения прокрутки работает правильно только после первой загрузки

1 голос
/ 08 февраля 2012

У меня есть веб-сайт с горизонтальной прокруткой, и в зависимости от положения прокрутки у меня есть замена изображения. При первой загрузке страницы во время прокрутки, когда наступает время для замены первого изображения, изображение исчезает, а затем снова появляется. После этого проблема исчезает. Ниже мой код 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/

Любая помощь будет оценена.

Спасибо

1 Ответ

1 голос
/ 08 февраля 2012

Это потому, что изображения не загружены заранее. Попробуйте это для относительно простой предварительной загрузки изображения, так как вам не нужно ждать, пока они будут выполнены в этом случае: 

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

...