CODEWITHSUNDEEP
ajaxperformancexmlhttprequest
olemarius
olemarius

Reputation: 1134

Speed up loading of 30-40 dynamically loaded images on each pageview

I've got a social community with a lot of traffic. In the right column of the site's layout, we got a "online list" that prints out a 40x40px thumbnail pic of friends, people in your area etc. 30-40 images in total.

Just before the right column loads, it hangs as all these images are loaded. I need a faster solution compatible down to IE6.

Is it possible to load images by ajax after the page has loaded, use some kind of inline gfx (supported by IE6) or other methods?

Upvotes: 0

Views: 695

Answers (5)

Jukka Dahlbom
Jukka Dahlbom

Reputation: 1740

If your problem is related to resizing these images server side on the run, you might want to store the thumbnails after resizing them once, and then serve only the thumbnails on the following loads.

40 small images should be no problem for most scripts. 40 full size images getting resized can be a lot of load.

pseudocode:

  1. user requests an image
  2. check if thumbnail of that image exists
  3. if not, create a thumbnail and serve it
  4. if yes, serve the thumbnail

You can get the server to cache these images by using apache rewrite to route certain .jpg|.png|etc requests to your resizing script. Other servers undoubtedly have similar features.

Upvotes: 0

kgiannakakis
kgiannakakis

Reputation: 104196

Loading the images via AJAX will work. You can easily do it using jQuery for example. Define a div for every image you want to display. Perhaps you could display a "Loading.." image or something like that in place of the actual image, when the page is initially displayed.

There are many options with jQuery. There is a plug-in for lazy loading, you can preload images and you can easily add effects when the image is displayed.

Upvotes: 1

Ender
Ender

Reputation: 213

I would also consider not showing 30-40 dynamic pictures since neither the server nor the client can effectively cache these pictures.

Upvotes: 0

Paul Dixon
Paul Dixon

Reputation: 301135

Yes, you can defer loading of the images, though you might want to include the regular HTML version inside a <noscript> tag so that simpler user agents/spiders can see your page.

Another technique is to load the images from a number of subdomains, since browsers typically only open a small number of connections to each domain. For example, if you site is on foo.com, load your static images from a.foo.com, b.foo.com and c.foo.com

Upvotes: 0

User
User

Reputation: 30985

Make this page area load asynchronously in the background.

Upvotes: 0

Related Questions