Load 1000 images smartly
 

Hi,
well 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 more SMARTER WAY of loading images (good regarding SEO, loads images faster and is good for user experience).
So, I was wondering if there is a way out to loading images in a better way?

You need to try to pre-load as many of them as you can before people get to that page - or alternatively split it up into several pages (possibly 30 or so pages would be reasonable for that number of images.

If you are only displaying a few to start with and action is required to replace them with more then use 'just in time' pre-loading where you load the next one or two images while your visitor is viewing the prior one.

Well that will not work for me as I will give one example, see this test page
http://bloghutsbeta.blogspot.com/201...ting-2_04.html

Right now I don't have 1000 images but e-g when I will have 1000 images then you can imagine those methods will not work, what should I do for this kind of scenario, by the way I am using quicksand jquery plugin by razorjet (I guess) which always require callback function when you add javascript to the items.

it's already too slow with the number of images you have running the code you are using.

that quicksand plugin in particular is going to be a real performance killer, but even 250 images on a page with no JS is going to be flaky for most users.

Yeah, for starters, write your own code. You can get the same effects in just a few lines of JS.

You *could* use preload for all the images that don't appear on the front "page", so that when the user selects (example) "bowling" only then will it need all the bowling images and, in the meantime, you have preloaded them.

But another way to do this would be to load *ONE* image per category and use an image map. However, that won't let you achieve your cute trick of rotating the image a little when it is selected. You'd have to find some other equivalent way of highlighting the selections.

Well the front page shows all images, the buttons like bowling and others are just organizers that uses images out of the images that are displayed in the front page (front page is the button 'ALL') if somehow there is a way that all image won't load and they load when the user scrolls or when any of the buttons like you mentioned 'bowling' is clicked, I don't know how to stop or control all images from loading. I have heard about infinite scroll but I have no idea how to use it with this plugin, as this plugin needs a callback for every extra script that is added to it