强制背景图像重新加载答案

【问题标题】：Force background image reload强制背景图像重新加载
【发布时间】：2013-12-11 12:54:29
【问题描述】：

当我的 ajax 请求成功时，我需要强制刷新背景图像我的 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。

【问题讨论】：

您必须像这里一样编辑图片网址：stackoverflow.com/a/2104998/3090180

标签： javascript jquery

【解决方案1】：

您可以在图片网址的末尾添加一个唯一 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}`);
    },
);

【讨论】：

谢谢！如果您不希望该查询字符串在那里，则更改为该随机字符串，然后再次将其删除。 $(".map_canvas").css("背景图片", "url(" + data + ")");

【解决方案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()));},

【讨论】：

【解决方案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})]
        }
    );
});

【讨论】：