Differ loading of Large images

[clevername]

Has anyone tried using the nice AJAX able uses, to differ the loading of the larger category images until the client is hovering. For example the category page loads entirely with just the medium size images. When the client hovers over the image, as a preview type feature, the larger image will then be loaded and shown.

[euroluxantiques]

You could do this with CSS without using AJAX. The downside of using CSS is you would have to load either the large image and make it smaller via CSS and then make it larger while the user hovers over it. Or, you could load both images and show the large image when the user hovers via CSS. You would have to test to see which method makes the best user experience in terms of page loading time, but I wouldn't think that you would want to use AJAX, as that would reload the portion of the page that the user hovers over. I would think that would look a little choppy to me. I've used CSS to do something similar on my eBay pages. For example:

http://cgi.ebay.com/ws/eBayISAPI.dll?Vi ... K:MESCX:IT

You can click the thumbnails to make them the main image, and then if you hover over the main image, it becomes slightly larger. The thumbnail click functionality is javascript and the hover is CSS. You could make the main image as large as you want with CSS. (BTW, the rest of the eBay listing layout is a little messed up because I'm transitioning to a new design as I write this.)

Another thing I've done is on my AbleCommerce site, the user can click on the picture to open a larger image in a new window. This also uses javascript and it could be modified to open in a popup, rather than going to a new page. Here's an example:

http://www.euroluxantiques.com/Antique- ... 7C158.aspx

Just some ideas for thought, but I think I would attack this with javascript and CSS, rather than AJAX. Just my opinion, though.

[clevername]

Well on our actual product pages, that is not an issue. It is our Category page that we are trying to speed up the loading. And as far as CSS resizing goes, that is actually a slower method because it first loads the image then re-sizes it. So that would not help differ the loading till hover. Right now we have it on the standard setting where it loads the product image and the larger hover image. When the page loads the CSS for the larger image is set to be hidden. Then some javascript changes the style to visible. As far as being choppy, when you load via AJAX I suppose will be primarily based on the users connection speed. But the resizing method you talked about is not a very good method to use all around.