What is the best way to make a side-scrolling website load quickly?

Question

I'm new to stack-overflow and programming so forgive me for any awkward phrasing!

I am building a side-scrolling website which is graphic-rich, and 680x9400px in size. I will be using some javascript and/or mootools to create a cool side-scrolling effect, similar to http://sursly.com.

I am web optimizing all the images used, but would like to know if anyone has any other ideas of how to speed up page loading? Is there any way to pre-load the site in horizontal sections for example?

Thanks in advance.

Answer 1

Using something like the jQuery Lazy Loading Plugin you can get a perceived speedup since only the visible images will be loaded. So they won't compete with off screen images.

I know you'll probably be using mootools, but it'd surprise me if they didn't have something similar.

Answer 2

Notice that most of the graphics on the Sursly site are pure black and white. This makes the site load dramatically faster since the files can be optimized way down.

Answer 3

I agree with Past One's answer, but would modify that slightly: instead of loading it as you need it, load it when you can. That is, initially load nothing but the first page. Once that has loaded, then load the second, then the third and so on.

Keep track of which parts have and have not loaded yet, and if a "page" which hasn't loaded is requested, then display a "please wait" sign and bump that page up the priority queue.

Remember to be careful with these techniques if you're interested in getting indexed by search engines.

Answer 4

Most websites that do this work like Google Maps does. They divide the world (or in your case, the virtual side-scrolling page) into tiles. As the user scrolls, AJAX is used to load the next tile, and it's displayed when the user reaches the edge of the currently visible tile.

You can load more than one not-yet-visible tiles on each side if you want, but it will take more client-side memory for that better user experience.