jQuery loading images takes long.

[kaizokupuffball]

Hi!
I have this problem on my website. When i move to the randomize section of my page it loads slow. It's ment to fetch alot of images, but it loads pretty slow, also the window freezes until the jQuery code in done running.

I don't know how to explain it better, but if you go to my site, you can see it yourself.
http://wallpapers.darkleaks.net/ (go to the Randomize section)

I want to do something like wallbase.cc have done on their site. Like a scroll down, the load new images etc.
But i do not how do deal with that, so help would be good.

Anyone?

[pritaeas]

Here is how to detect that you scrolled to the bottom. Then you need to change your load to something that reads just a specific amount of images at a time. To do that you'll need to change your get.php?page=N to return a "page" at a time.

[kaizokupuffball]

Thx!

[LaxLoafer]

Hi Puffball

When I visited your site earlier in the week there were 230 thumbnails to download. That's rather a lot, especially for someone visiting your page for the first time, with an empty browser cache.

As has already been suggested, dividing the content up into pages and downloading it dynamically might help. This is what Wallbase appear to be doing. But I think there is more you need to consider.

Each of those thumbnails is generating an HTTP request, and I suspect it's these that are killing your site's performance. One difference I noticed between Wallbase's site and yours, is they display larger but fewer thumbnails per page. Although the screen area is identical, and so the amount of image data transmitted would be similar, they're actually having to processing fewer HTTP requests.

In addition to displaying few thumbnails per page, you could try merging thumbnails into a single image. You could then use an image map or some other method for capturing a user's click. It would be interesting to know how this performs, and fairly simple to test :-)

BTW, you have two external CSS files linked. Why not merge them into one? Also, there's a great chance a new visitor will have already cached a copy of jQuery from another source, i.e. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js So, why force new visitors to download your duplicate copy?

One final thought on HTTP request optimization...

Each request for a thumbnail image on your domain is sending a full HTTP header. Put all of your static content on a separate domain or subdomain, and it will keep your headers lean by stripping cookie data.