Como recarregar / atualizar um elemento (imagem) no jQuery

É possível recarregar uma imagem com um nome de arquivo idêntico de um servidor usando jQuery?

Por exemplo, eu tenho uma imagem em uma página, no entanto, a imagem física pode mudar com base nas ações do usuário. Observe que isso não significa que o nome do arquivo seja alterado, mas o próprio arquivo real.

ou seja:

• O usuário visualiza a imagem na página padrão
• Usuário envia nova imagem
• A imagem padrão na página não muda (suponho que isso seja devido ao nome do arquivo ser idêntico, o navegador usa a versão em cache)

Independentemente da frequência com que o código abaixo é chamado, o mesmo problema persiste.

$("#myimg").attr("src", "/myimg.jpg");

Na documentação do jQuery, a função "load" seria perfeita se tivesse um método padrão de acionar o evento, em vez de vincular uma função de retorno de chamada a uma carga completa / bem-sucedida de um elemento.

Qualquer assistência é muito apreciada.

Parece que seu navegador está armazenando em cache a imagem (que agora notei que você escreveu em sua pergunta). Você pode forçar o navegador a recarregar a imagem passando uma variável extra da seguinte maneira:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

Provavelmente não é a melhor maneira, mas resolvi esse problema no passado simplesmente anexando um carimbo de data / hora ao URL da imagem usando JavaScript:

$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

Na próxima vez que carregar, o carimbo de data e hora será definido como o horário atual e o URL será diferente; portanto, o navegador fará um GET para a imagem em vez de usar a versão em cache.

Este pode ser um dos dois problemas que você mencionou.

1. O servidor está armazenando em cache a imagem
2. O jQuery não dispara ou pelo menos não atualiza o atributo

Para ser sincero, acho que é o número dois. Seria muito mais fácil se pudéssemos ver mais jQuery. Mas, para começar, tente remover o atributo primeiro e, em seguida, defina-o novamente. Só para ver se isso ajuda:

$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");

Mesmo que isso funcione, poste algum código, pois isso não é o ideal, imo :-)

com uma linha sem se preocupar em codificar a imagem src no javascript (obrigado a jeerose pelas idéias:

$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());

Para ignorar o cache e evitar adicionar carimbos de data e hora infinitos ao URL da imagem, retire o carimbo de data e hora anterior antes de adicionar um novo, é assim que eu fiz.

//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);

function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
    //get the src attribute
    source = jQuery(".xyro_refresh").attr("src");
    //remove previously added timestamps
    source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
    //prep new src attribute by adding a timestamp
    new_source = source + "?timestamp="  + new Date().getTime();
    //alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
    //set the new src attribute
    jQuery(".xyro_refresh").attr("src", new_source);
}

Isso funciona muito bem! no entanto, se você recarregar o src várias vezes, o carimbo de data e hora também será concatenado no URL. Eu modifiquei a resposta aceita para lidar com isso.

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

Você já tentou redefinir o HTML dos contêineres de imagens. Obviamente, se é o navegador que está armazenando em cache, isso não ajudaria.

function imageUploadComplete () {
    $("#image_container").html("<img src='" + newImageUrl + "'>");
}

Algumas vezes, na verdade, solução como -

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

também não atualizar src corretamente, tente isso, funcionou para mim ->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

Usar "#" como um delimitador pode ser útil

Minhas imagens são mantidas em uma pasta "oculta" acima de "www", para que apenas usuários logados tenham acesso a elas. Por esse motivo, não posso usar o comum, <img src=/somefolder/1023.jpg>mas envio solicitações para o servidor <img src=?1023>e ele responde enviando de volta a imagem mantida sob o nome '1023'.

O aplicativo é usado para o corte de imagens; portanto, após uma solicitação do ajax para cortar a imagem, ela é alterada como conteúdo no servidor, mas mantém seu nome original. Para ver o resultado do corte, após a solicitação do ajax ser concluída, a primeira imagem é removida do DOM e uma nova imagem é inserida com o mesmo nome <img src=?1023>.

Para evitar descontar, adiciono à solicitação a tag "time" precedida de "#" para que se torne como <img src=?1023#1467294764124>. O servidor filtra automaticamente a parte de hash da solicitação e responde corretamente enviando de volta minha imagem mantida como '1023'. Assim, sempre recebo a última versão da imagem sem muita decodificação no servidor.

Talvez eu precise recarregar a fonte da imagem várias vezes. Encontrei uma solução com a Lodash que funciona bem para mim:

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

Um registro de data e hora existente será truncado e substituído por um novo.

Com base na resposta de @kasper Taeymans.

Se você simplesmente precisar recarregar a imagem (não substitua src pelo smth new), tente:

$(function() {
  var img = $('#img');

  var refreshImg = function(img) {
    // the core of answer is 2 lines below
    var dummy = '?dummy=';
    img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());

    // remove call on production
    updateImgVisualizer();
  };


  // for display current img url in input
  // for sandbox only!
  var updateImgVisualizer = function() {
    $('#img-url').val(img.attr('src'));
  };

  // bind img reload on btn click
  $('.img-reloader').click(function() {
    refreshImg(img);
  });

  // remove call on production
  updateImgVisualizer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">


<p>
  <label>
    Current url of img:
    <input id="img-url" type="text" readonly style="width:500px">
  </label>
</p>

<p>
  <button class="img-reloader">Refresh</button>
</p>

Eu simplesmente faço isso em html:

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

E recarregue a imagem no código por trás assim:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}