CODEWITHSUNDEEP
javascriptjqueryimageloading
CryOfFaclon
CryOfFaclon

Reputation: 249

Load 1000 images smartly

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)

Upvotes: 15

Views: 5516

Answers (5)

Deadlykipper
Deadlykipper

Reputation: 878

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.

Upvotes: 0

cypherabe
cypherabe

Reputation: 2603

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.

Upvotes: 1

Satish N Ramteare
Satish N Ramteare

Reputation: 197

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.

Upvotes: 0

HJW
HJW

Reputation: 23443

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.

Upvotes: 0

leepowers
leepowers

Reputation: 38298

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.

Upvotes: 20

Related Questions