强制背景图像重新加载

Question

我需要强制div背景图像刷新而我的ajax请求成功我的div背景图像网址同样没有改变但图像内容改变而ajax success.how我可以刷新背景网址。

JavaScript的

    $.ajax({
 url: "editor/savemapimage.php",
 type:"POST",
 data:{imagevalue : urlimage},
success:function(data){$(".map_canvas").css("background-image","url("+data+")");},

上面的代码如果结果数据是字符串的东西map.png所以这将是相同的但我的PHP页面更新图像内容所以需要刷新此URL每次图像更新时。

Answer 1

您可以在图片网址的末尾添加唯一ID，例如：

http://yourdomain.jpg?random=1239308234

如果ID是唯一的，浏览器会将其视为新资源并重新加载图像。

var randomId = new Date().getTime());
 $.ajax({
   url: "editor/savemapimage.php",
   type: "POST",
   data: {
     imagevalue: urlimage
   },
   success: function (data) {
     $(".map_canvas").css("background-image", "url(" + data + "?random=" + randomId + ")");
   },

Answer 2

您应该在背景图像中添加一些随机查询并重新设置

$.ajax({
    url: "editor/savemapimage.php",
    type:"POST",
    data:{imagevalue : urlimage},
    success:function(data){$(".map_canvas").css("background-image","url("+data+"?random="+ new Date().getTime()));},

Answer 3

对于使用Literally Canvas的任何人，您可能会遇到同样的问题。在Chrome中我肯定会发生这种情况。 Bas van Dijk的解决方案运行良好，所以只需使用它：

$(document).ready(function() {

    //background image (add random variable to stop caching)
    var backgroundImage = new Image()
    backgroundImage.src = "my-image.png?r=" + new Date().getTime();

    var lc = LC.init(
        document.getElementsByClassName('literallycanvasdiv')[0],
        {
            backgroundColor: 'whiteSmoke', 
            backgroundShapes: [LC.createShape('Image', {x: 10, y: 10, image: backgroundImage, scale: 1})]
        }
    );
});