eCaroth
eCaroth

Reputation: 531

forced reload of two HTTP resources on same page?

I am attempting to figure out a way to force a resource at an identical uri to be requested from the server EACH TIME it is referenced on the same page.

For example: I have a dynamically generated image at the url 'mypage.com/img?u=1'

That uri is the src for 2 img tags on the same webpage. No matter what the content ends up being, the image is loaded once and then reused from the browser cache for each reference on that page.

I have tried experimenting w/ every caching header out there:

header("Etag: \"".time().rand(100000,999999).'"');
header("Expires: ".gmdate("D, d M Y H:i:s",time()-(60*60*24*1000)) . " GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s",time()-(60*60*24*1000)) . " GMT");
header("Cache-Control: no-store, no-cache, proxy-revalidate, must-revalidate, max-age=0");
header('Pragma: no-cache');

This of course prevents the resource from being cached on subsequent page loads, but does nothing for my problem. Before you say that this is an error of my design and I should just user different URIs, know that in this current case that is not an option, nor is dynamically changing the referenced uri client side after the request.

I have even tried using 302,307, and 303 status headers w/ a location redirect to a new unique resource, to no avail. I am starting to think that this is not a solvable problem due to browser design but any input would be GREATLY appreciated!

*UPDATE* If I use javascript to write a new image w/ the exact same URI as the ones that the browser is reusing on the initial pageload it IS giving me a dynamic (non-cached) result back. Odd

Upvotes: 0

Views: 177

Answers (1)

ChrisK
ChrisK

Reputation: 1402

Have you tried changing the link slightly to have a random number at the end?

So the uri will look like: 'mypage.com/img?u=1&123456' (where 123456 is a result of rand()*100000)

This would cause the image to be reloaded and not stored in the browser cache during initial page loading

Edit based on OP clarity

You could try using the javascript onLoad event to wait until the page is loaded (it the first image is completed) before starting the request on the second image, something along the lines of

    <img src=# id=secondImage>

    document.onLoad = "document.getElementById('secondImage').src = 'mypage.com/img?u=1'";

Additional edit

You could also possible try changing .htaccess file

    Header set Cache-Control: "no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0"

Might not help, but might

Upvotes: 1

Related Questions