Question

I’m using this javascript code to set an image src to the image src of an existing image:

var src = $('#thumbnailImg' + pageNum).attr('src');
$('#mainAppImageImg').attr('src', src);

In Firefox and IE this works as intended – the image uses the existing image and doesn’t request the image again from the server.

In Safari, it is causing the image to be reloaded from the server. I think this is because I’m doing something wrong with the image headers the server is returning but this is not a subject I know a lot about.

You can see this in action here: http://www.las.si/tryitout.php.

Answer 1

As said by Dev:

By default, the image will be reloaded

You should force server to cache image using .htaccess file on your images folder:

Header unset Pragma
Header set Cache-Control "public, max-age=10000, must-revalidate"

This way, safari and chrome will reuse your browser cache.

You could search too for encoding your image in base64, server side or client side using canvas element.