I’m creating an image browser plugin in JQuery. Essentially, there’s going to be a full-sized image on my page, and underneath that will be an image scroller containing a bunch of thumbnails of the available images. When the user clicks a thumbnail, it will move up to the full-sized box.
I intend to just resize the thumbnails via HTML/CSS in stead of storing a separate thumbnail file. My question is, if the browser loads all of my images into the thumbnail scroller, will it have to reload each image again when it is pushed into the full-size viewer?
I know that generally the answer to this is no – once the browser has downloaded the file, it is available. However, I’m not just using static images. There’s some pre-processing that happens on the images, so I will be sending them via PHP.
For example, the src of one of my thumbnails might be http://www.mydomain.com/prepImage.php?id=1
PHP would then do some processing and return like this:
header("Content-Type: image/jpeg");
echo $StringifiedJPEGFile;
Will returning the file from PHP like this force the browser to redownload the image every time I set an image’s source to that link?
Images are only loaded once per page. And even that, will depend on the headers you send.
You can tweak the last modified header, the expires header, set an etag header, etc. in such a way that it’ll only be reloaded when needed.
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html