1

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

Chris
  • 71
  • 1
  • 11
  • You don't need the `>=` conditions in your `else if` parts, since if they're below that value the preceding condition would have evaluated to true. Not going to fix your problem, but it does make your code a bit more readable and slightly less daunting to look at. – Anthony Grist Feb 08 '12 at 16:19

1 Answers1

1

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.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • I am not sure if I should post a new question or continue on this one I also need to be able to adjust dynamically the scroll position numbers depending on the screen resolution. I have thought of using different js files to load depending on the resolution but will this be a correct way to do it or should I be looking at something else? – Chris Feb 09 '12 at 15:45
  • I think that should be worthy of another question, as it isn't directly or indirectly related to the title of this question, meaning it would be hard for someone looking for that question to find this one for the answer. :) We would need more information on what the scroll positions represent, how your page layout works, and how the resolution affects your page layout. – Kevin B Feb 09 '12 at 15:49
  • Kevin B, regarding your answer for the image preloader, I have hard coded the urls for the images and still experiencing the same problem. Should I put the preloader outside the document.ready? – Chris Feb 21 '12 at 14:32
  • It can be placed outside of the document ready, but It shouldn't have made much of a difference. – Kevin B Feb 21 '12 at 14:53
  • the problem is I need those images 100% loaded before it displays anything on screen otherwise when you start scrolling the image again dissapears for a sec. unless the user lets the page completely load and then the image doesnt dissapear on scroll – Chris Feb 21 '12 at 14:59
  • Hmm.... Do you want a preload image kind of thing so that the user can't interact until they are done loading? How big are these images? (file size) – Kevin B Feb 21 '12 at 15:03
  • the files are about 5KB max. Its just when you scroll and the image changes depending on your scroll position I dont want it to dissapear for a second the first time it loads. I ve moved the preloader outside the document ready function. the page is on http://karpouzaki.com/30/ I think by moving it outside it creates a lag on the page – Chris Feb 21 '12 at 15:11
  • hmm... at 5kb, they should be loading near instant regardless of whether you place it inside or outside of the document ready. I can't recreate your issue in google crhome, what browser are you testing in? – Kevin B Feb 21 '12 at 15:40
  • at 5KB each image and 6 images i thought the same. In chrome there doesnt seem to be a problem or its so quick you cant tell. But in firefox and safari you can tell. As soon as you open the page scroll to the next content and you ll notice the image on the top right cornere will dissapear for a second and reappear. check it on karpouzaki.com/40/ – Chris Feb 21 '12 at 17:11
  • From the preloader that we have above how would I get image 3 and use it in a function? – Chris Feb 21 '12 at 18:06
  • I think I found it. I want to get the images I preloaded with the $.each and use them in the scroll position function and replace the background images accordingly. Whats happening I think I am preloading the images but the scroll position function is reloading them seperatly.What do you think? – Chris Feb 21 '12 at 18:11