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 .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)

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)

• javascript
• jquery
• image
• loading

• 18 Don't have that many images on a single page. – Quentin Commented Apr 13, 2012 at 8:45
• 2 Not sure why and how you want these images to appear. You may need to think about the user interaction before you go and explore the solution. – Spoike Commented Apr 13, 2012 at 8:48
• 7 loading 1000 images in a single page is not a "smart" move. – Joseph Commented Apr 13, 2012 at 8:49
• 3 My initial thought is that if you're loading 1000 images, then there's no real way to ease that pain. It's going to hurt. That said, perhaps if you explained what those 1000 images are for, there may be some sort of solution. – izb Commented Apr 13, 2012 at 8:51
• 1 @DanNeely well I have tried my best and have kept the px to 90 x 90 and the size of image stays around 4KB but still it would mean 4MB which is a SHOCKING news for me. – CryOfFaclon Commented Apr 13, 2012 at 14:24

5 Answers 5

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.

The best answer I can think of:

Don't do this. Don't load 1000 images on one site, and do use some kind of lazy loading or pagination.

Nevertheless, one idea, not sure if it fits, as you never gave the concrete use case: run a cron job to stitch the images together to a/some bigger image(s) every X minutes depending on your needs. Use the bigger image as you would use a sprite solution.

Some years ago, I think year 2010, the Singapore National Day parade site frontpage had multiple pictures, like 20 x 20 of them. Every day during peak hours the database (MySQL) and web server (Apache) went down.

The development team then deployed memcached to resolve the issue.

Use lazy loading to render these images when the user scrolls the page load set of images on the fly.

This is a complex way to do where you load af few (N number of) images first and check that the user has not scrolled till few rows of images are left before containerNode.offsetHeight. If the user scrolls down that limit you create N number of image tags for the next n images to be loaded.

This N can be varied based upon the image file size or dimensions.

Try the plugin QueryLoader 2. It won't help you to load them quicker - as you say, the increase in number - but it will show a "loading" screen while elements are still loading, and may provide you with a better user experience.

That or do as in some other answers and load them as you scroll down.