Friday, 15 July 2011

ajax - Django - Javascript - Disable cache on image refresh -



ajax - Django - Javascript - Disable cache on image refresh -

i use, in template, next javascript refresh image:

<script type='text/javascript'> $(document).ready(function() { var $img = $('#imageactual'); setinterval(function() { $.get('{{ media_url }}{{ data_to_modify.thumbnail.name }}?cachebuster='+math.floor(math.random()*100 +1), function(data) { var $loader = $(document.createelement('img')); $loader.one('load', function() { $img.attr('src', $loader.attr('src')); }); $loader.attr('src', data); if($loader.complete) { $loader.trigger('load'); } }); }, 2000); }); </script>

and display image next html code:

<img id="imageactual" src="{{ media_url }}{{ data_to_modify.thumbnail.name }}" />

in view added

@never_cache @cache_control(max_age=0, no_cache=true, no_store=true, must_revalidate=true)

and

response = render(request, 'mainsite/modify.html', locals(), context_instance=requestcontext(request)) response['cache-control'] = 'no-store, no-cache, must-revalidate proxy-revalidate' response['expires'] = 'thu, 01 jan 1970 00:00:00 gmt' response['pragma'] = 'no-cache' homecoming response

but image still caching in browser (chrome: version 35.0.1916.153 m)... have thought how avoid this?

edit 1:

**header:** remote address:127.0.0.1:80 request url:http://127.0.0.1/medias/thumbs/odbgelguelteeglndjssastj.jpg request method:get status code:200 ok (from cache)

as @yedpodtrzitko pointed out, adjusting cache headers of web page in django pointless.

this part looks wrong:

$.get('{{ media_url }}{{ data_to_modify.thumbnail.name }}?cachebuster='+math.floor(math.random()*100 +1), function(data) {

{{ media_url }}{{ data_to_modify.thumbnail.name }} url of of image want display right? (you utilize same url in html img tag)

in case doesn't create sense load url via ajax.

it seems don't need ajax @ all, need periodically update src attribute of img tag, cachebuster querystring appended:

<script type='text/javascript'> $(document).ready(function() { var $img = $('#imageactual'); setinterval(function() { $img.attr('src', '{{ media_url }}{{ data_to_modify.thumbnail.name }}?cachebuster='+math.floor(math.random()*100 +1)); }, 2000); }); </script>

javascript ajax django image browser-cache

No comments:

Post a Comment