Django - Javascript - 在图像刷新时禁用缓存

时间:2014-06-18 08:28:33

标签: javascript ajax django image browser-cache

我在我的模板中使用以下javascript来刷新图像:

<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>

我用以下html代码显示图像:

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

在我看来,我添加了

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

    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'
    return response

但是图片仍然在浏览器中缓存(Chrome:版本35.0.1916.153 m)...您是否知道如何避免这种情况?

编辑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)

1 个答案:

答案 0 :(得分:2)

正如@yedpodtrzitko指出的那样,在Django中调整网页的缓存标题毫无意义。

这部分看起来不对:

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

{{ MEDIA_URL }}{{ data_to_modify.thumbnail.name }}是您想要显示的图片的网址吗? (您在html img标记中使用相同的网址)

在这种情况下,通过ajax加载该URL是没有意义的。

您好像根本不需要ajax,只需要定期更新src标记的img属性,并附加cachebuster查询字符串:

<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>