Question

I have a site that is basically one large page, it is a flipbook (powered by jQuery Booklet Plugin) that has 50 pages and has artwork on each pages. The size of this page is between 6 – 7mb in size. This is a bit large and slow connections can take a while to load the page. I am looking into breaking the book into multiple categories (thus multiple smaller pages) but in the mean time I have these two quesitons:

• What is the best way to handle loading of pages that have a lot of content?

• How do large sites handle these issues?

Note: I cannot use sprites for the images on the page.

Answer 1

You could try lazy loading the images (http://www.appelsiini.net/projects/lazyload) – the images will not be requested until they are visible on the page.

Another option is to use the change event in the booklet script to load the content for that page using AJAX. This way not all the content would need to be downloaded initially, however you would see some delay when changing pages on the client side.

$(".selector").booklet({
    change: function(event, data) { ... }
});

Most large sites with “endless” scrolling (like Facebook for example) use AJAX to only load more content when it is needed.