help 300+ image on the page, eats processor too much

Question

I'm developing gallery in my web application and i was creating script which loads and appends new images at the bottom, when users scrolls to the bottom of the page.

But when images become around 300~, appending and scrolling process eats too much process power.

Is the any solution for this issue?

I saw everything works fine in new google images search results.

Sorry for comments. :)

http://pastebin.com/QAYXpWvC

Answer 1

Page the results or if you are doing a 'continuous scroll' you need to remove the ones that are off screen (ie scroll in both directions).

edit
I investigated a little about google images. They load about 430 images which on my machine consumes 600 megs of ram for that single tab in Chrome. If your machine is low on resources, you should see spikes in performance in their UI too, not just yours.

Answer 2

Load only those images which are visible in the first view. Subsequently use ajax to load as user scrolls down. A lot of websites does this and loads next page via Ajax. This is someway similar to what Facebook does (I observed in Firefox 3.6.8). It creates place holders for all images in an large album. However it loads only those which are visible in current view. When you scroll down, it fetches thumbnails to fill remaining view.