Question

我有用户可以更改个人资料照片的页面。现在，如果用户同时在多个浏览器中操作，我想改变所有这些浏览器中的图片。写了ajax调用但不知何故所有浏览器（IE11，FF30等）都从缓存加载图像。

function ref() {
                //$('#logout>div').fadeOut(300).load(location.href+' #logout #dp').fadeIn(300);
                $.ajax({
                    url     :   '<?php echo base_url(); ?>uploadimg/refresh/'+Math.random(),
                    type    :   'POST',
                    cache   :   false,
                    success :   function(data) {
                        $('#logout #dp').fadeOut(100).attr('src','<?php echo base_url(); ?>assets/uploads/'+data).fadeIn(100);
                        //alert('a');
                    }
                });

                setTimeout(ref, 6000);
        }

Answer 1

即使html图像src不断重建，如果该源的文本保持不变，浏览器将缓存实际图像资源，直到重新加载页面为止。您可以在图像源的末尾添加一个?后跟一个随机字符串，这会强制浏览器从源代码刷新。

成功的内容：

$('#logout #dp')
    .fadeOut(100)
    .attr('src','<?php echo base_url(); ?>assets/uploads/' + data + '?' + Math.random())
    .fadeIn(100);

Answer 2

Math.random()返回带小数点的数字。

所以我建议使用没有任何特殊字符的数字。

 function ref()
{
    $.ajax({
        url: '<?php echo base_url(); ?>uploadimg/refresh/' + Math.random(),
        type: 'POST',
        cache: false,
        success: function (data) {
            d = new Date();
            $('#logout #dp').fadeOut(100).attr('src', '<?php echo base_url(); ?>assets/uploads/' + data + "?" + d.getTime()).fadeIn(100);
        }
    });
    setTimeout(ref, 6000);
}

AJAX无法正确加载图像

2 个答案: