Advice about Preloading

Question

Greeting's and thanks for your time.

I just started a new job building a new marketing site for a headphone company. I'am still a student with a year left and I trying to figure out the best way to proceed with a challenge I've been given for this site.

The site is a parallax scrolling site, with movement horizontally and vertically.

The area I need advice on is with the site being a scrolling site there is no natural point to do a page refresh. We have near 25 products, each with several variations totally over 250 images. My boss wants the site to scroll as seamlessly as possible, i.e. the user will move left/right to see the products, then the user moves up/down to see the variations of that particular product.

What would be the most effective means to load these images?

1. My first thought was to have the pre-loader begin loading everything after the home pages loads. This seems like the easiest solution but probably less effective?

2. My next thought was to have the scroll trigger additional pre-loader events? I've looked into this and I could use some advice on how to best accomplish this? I'am trying to avoid, within reason, the user seeing a loading gif.

3. Haven't had a next thought? but please let me in on any other process that might be better.

I'am not looking for an explicit answer, although if you want to provide one... I'am really just looking for advice and hopefully some articles that can get things going.

Answer 1

I was in a similar situation, although my parallax site was just for experiment/fun, but I found https://github.com/protonet/jquery.inview/ to be a possible solution. A loader for the first sections then after that inview would load in the next ones on scroll.