In terms of performance, what is the best method to show 1000 images on a page?

Question

I'm trying to show 1000 quite small images on a page (rather a lot indeed but out of my control).

When loading them all at once, the performance obviously suffers drastically rendering 1000 images at once.

I tried implementing applying the image src upon scroll (at numerous amounts - 250px scroll, 25 images load etc.), then tried loading the images on a timer.

These methods did help to increase performance but what would be the most efficient way to do this? They seemed to still have an irritating amount of lag - I understand there is a fundamental problem with rendering that many images on one page, but is there a better solution?

EDIT:

Pagination of course would help but isn't an option here. Also, the images are pulled from an API so it's not convenient to make 1 large image / use sprites.

Answer 1

If all the images are unique files then you are feeling the big hit from making multiple connections to retrieve them. You could create 1 "master" image of all the items and then create 1000 divs each with a different class or id then in css define background offsets for each. This method is often refered to as css sprites.

http://css-tricks.com/158-css-sprites/

Answer 2

Couldn't you make an AJAX pagination, that dynamicly loads the images based on page number? For example, 25 images per page. On requesting the first page, you dynamicly load the next page and so on. That way, the user won't notice the delay.. That's all you can do to improve the performance even further!