javascript - 强制背景图像重新加载

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。

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