Avoid repeated image retrival from server

Question

Hi!

I am new to web design. Please correct me if my understanding is wrong. I am seeking advices that can avoid the round trip between browsers and server in the following scenarios.

Imagine javascript first downloads all 30 ~ 50 images from server. These images are then used to build the thumbnail images, each in 60px by 60px or so size, for user's selection. This effect is achieved with css and some freely available javascript library.

After one of the thumbnail image is clicked, javasrcipt then places that image on a larger canvas. The size of the larger image is determined according to its original size about 900px X 600px or larger. To get the original size of the image, I code the javascript on client side similar to the folowing:

var img=new Image();
img.src="uploaded1.jpg";
var w,h;
w=img.width;
h=img.height;

My problem is that such design appears to be very inefficient in terms of traffic because every image will be downloaded 3 times:

1. for rendering to image gallery
2. after the javascript code executes at img.src="uploaded1.jpg";
3. for the rendering of large size image after the DOM node has been added by javascript:<img src="uploaded1.jpg" alt="big image"/>

Further, I want to allow users to upload more images anytime and add these images to the image gallery. In order to achieve this, some javascript must be designed to download exactly the same images, which this same browser has just uploaded to server, from server so that they can be added to DOM like these:

<img src="new1.jpg" alt="new image 1"/>
<img src="new2.jpg" alt="new image 2"/>

What does not make sense to me is the round trips between browsers and server made by these images. It is obviously unnecessary for the browser to reload the same images from server when the browser has the first hand information of these images.

Because it is the same browser that uploads these image files and render the images, theoretically there should exist some way to tell the browser to reuse these images - render them either before or after uploading them. The page must be designed to work in such inefficient manner only because in HTML world there is no way for javascript to feed in-memory image to browser by manipulating DOM.

SVG's local IRI reference might be helpful. I can implement <image> element under <defs> alright, but I am not sure browsers (IE 9 especially) will again blindly retrieve the same image from server every time this <image> is referenced by other elements. Enlightenments about SVG will be greatly appreciated.

I have also read articles about http/browser caching and have got the impression that browser caching is not reliable because users can manually disable the cache and the cache size can be set too small for large number of images. Besides, the cache mechanism can not eliminate the unnecessary round-trip as in previously mentioned "upload-then-download-image-to-add-to-gallery" scenario.

As an aside, flash is the last thing I want to learn and use.

Best Regards,

CN

enter code here

Answer 1

I'm not sure, but I think the best way to tell browser to reuse the image is not to change it's filename, nor the file itself. It should be accessed using the same path each time. Subsequent requests for the same file should result fetching the file from browser's cache, right? The way to achieve this is to use file naming algorithm providing always one and the same name for the same image / thumbnail. If you upload a file, AFAIK the file is not in a browser cache, due to usually different filename, it has to be downloaded once. In my practice the browser caches were usually overzealous and cached too much data (which caused problems with modifying the files loaded via AJAX, the caching should be explicitely disabled for testing, and enabled for production). Have you tested your site with FireBug and Chrome resource trackers?

BTW, I hope you don't render the bigger image on server. This could be quite ineffective, especially if done often. The canvas object has lots of quick and easy methods for most basic image manipulation tasks, so the only image loaded should be the ones uploaded before. The only thing which should be done server side is scaling down. It's impossible to do it direct on client side because browsers cannot access local files from a remote site. Every exception from that rule should be reported as a major bug.

The route {full sized user file}->{server}->{scaled down}->{client} seems to be unevitable.