强制重新加载背景图片

Question

当我的ajax请求成功时，我需要强制刷新div背景图像。我的div背景图像url没有改变，但是在ajax请求成功后，图像内容发生了变化。我应该如何刷新背景url。

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。

- Affan Ahmad

---

你需要像这样编辑图片URL：https://dev59.com/questions/DnI95IYBdhLWcg3w5SSh#2104998 - apo

Answer 1

您可以在图像URL的末尾添加唯一的ID，例如：

http://yourdomain.jpg?random=1239308234

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

const 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}`);
    },
);

- Bas van Dijk

---

谢谢！如果您不想在那里使用查询字符串，那么请更改为随机字符串，然后再将其删除。 $(".map_canvas").css("background-image", "url(" + data + ")"); - Adamz

Answer 2

对于任何使用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})]
        }
    );
});

- garrettlynchirl

Answer 3

你应该添加一些随机查询到你的背景图片中，然后重新设置它

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

- Ruben Nagoga