Force background image reload

Question

Мне нужно заставить div обновить изображение в фоновом режиме, пока мой запрос на успех ajax. Мой div background image url же не изменился, но изменился контент изображения в то время как ajax success.how может обновить исходный 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 изображения, как:

http://yourdomain.jpg?random=1239308234 

Если идентификатор уникален, браузер будет считать его новым ресурсом и перезагрузит изображение.

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

Для тех, кто работает с буквально холстом, вы можете получить эту же проблему. Это, безусловно, происходило для меня в Chrome. Решение Bas ван Дейк работает хорошо так просто использовать его так:

$(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})] 
     } 
    ); 
});