The best way to preload images

Question

I just built a jquery and css website for art and it takes a ridiculous amount of time to load for new visitors, after visted (cached) it loads fairly quick.

My question is, what's the best method for preloading lots of images.

If anyone is interested in seeing the load time, you can check it out here:

http://zabetpucket.com/

I would love feed back on how long it took to load and of course the best way to optimize this load time. Thanks in advance.

I'd be happy to share code if anyone feels it would be easier for them to give a definitive answer.

=]

Well, [sprites](http://www.spritecow.com/) are often suggested. — Jared Farrish, Mar 12 '13 at 03:12
You will also want to focus on compressing your assets to make them as small as possible. I always use ImageOptim http://imageoptim.com/ — DigitalDesignDj, Mar 12 '13 at 03:13

score 2 · Answer 1 · edited Apr 13 '17 at 12:32

I would opt to load only the section that is visible. Do something like Instagram or Wordpress (I think Apple is doing it too) and have an event listener on the scrollbar so that it loads the next section, and not the entire page. Optimizing your images is a must as well, as @DigitalDesignDj suggests in the comments.

I see you've already got a scroll event handler on there to make the section title bold, but you should look into jQuery .load() to load the section that is visible (or the next upcoming one). With optimized images, it's not going to be a big deal to load the images after or during the animated scroll.

You could get a loading animation too, which is good for User Experience.

The best way to preload images

1 Answers1