javascript - Load 1000 images smartly

Question

I have like 1000 images on the same page. Unfortunately, I can't use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 HTTP requests, so it takes lots of time for the images to load plus it's not good experience for the visitors.

I have seen one of the scripts named as Lazy Load, but I was thinking if there is a smarter way of loading images (good regarding SEO, loads images faster and is good for user experience).

Is there a way out to load images in a better way?

To elaborate:

I have to load all 1000 images on the same page, there is no other way out. What is it going to be like or for what am I going to use it for, I have actually made a test page for you at http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html.

As you can see, I am using the jQuery Quicksand plugin made by Jacek Galanciak. I don't have good relations with this plugin as if I am going to add jQuery or a script to it. It will ask for a callback function which is a blind spot for me. (That's why I made a CSS tooltip for it :D)

I have many pictures in my test page but not 1000. When they will be 1000, it will be a mess. So I don't know how to deal with 1000 images in this case. (By the way THANKS TO YOU ALL FOR LOVELY COMMENTS)

Answer 1

Very few use cases support serving hundreds or thousands of images on a single page. One such case is Google Images. This is how to do it right:

https://www.google.com/search?tbm=isch&q=jeff+atwood

1. Lazy load images This is a requirement. If the images are below the fold (outside the visible document area) there's no reason to load them.

2. Use pagination Google Images breaks up results into pages where only a handful of images are loaded at the time. Google also uses some JavaScript-fu to implement an infinite scroll - once the browser gets close to the bottom of the current results, it sends a request to load more result pages and injects them at the bottom of the page.

3. SEO: No JavaScript, No Problem Visit the Google Images link again, but with JavaScript turned off. You can still browse through the results pages - there's about 15 images per page. Search engines can index this image content.

4. Maximum Image Display Once more than 150+ images are being displayed put a button at the bottom of the page to "Load More Results" - this button reloads the entire page, but starts at the 151st image instead of the 1st. Every image the browser has to draw takes up more memory & CPU cycles. Scrolling a long list can quickly bring a mobile browser or modest desktop to crawl.

Loading thousands of images is bad - it will tax your server to ruing the user experience. This is true of any large data set that a user wants to browse.