Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 697
user54021 Avatar asked Jan 12 '09 01:01

user54021


4 Answers

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.

like image 65
Allain Lalonde Avatar answered Oct 22 '22 15:10

Allain Lalonde


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.

like image 29
Soviut Avatar answered Oct 22 '22 14:10

Soviut


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.

like image 2
nickf Avatar answered Oct 22 '22 14:10

nickf


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.

like image 1
dj_segfault Avatar answered Oct 22 '22 16:10

dj_segfault