real - Cómo recargar/actualizar un elemento(imagen) en jQuery

recargar pagina sin perder datos javascript

Question

¿Es posible volver a cargar una imagen con un nombre de archivo idéntico desde un servidor usando jQuery?

Por ejemplo, tengo una imagen en una página, sin embargo, la imagen física puede cambiar en función de las acciones del usuario. Tenga en cuenta que esto no significa que el nombre del archivo cambie, sino el propio archivo real.

es decir:

• El usuario ve la imagen en la página predeterminada
• Usuario carga nueva imagen
• La imagen predeterminada en la página no cambia (supongo que esto se debe a que el nombre del archivo es idéntico, el navegador usa la versión en caché)

Independientemente de la frecuencia con la que se llame el código siguiente, el mismo problema persiste.

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

En la documentación de jQuery, la función de "carga" sería perfecta si tuviera un método predeterminado para activar el evento en lugar de vincular una función de devolución de llamada a una carga exitosa / completa de un elemento.

Cualquier ayuda es muy apreciada.

Answer 1

Simplemente hago esto en html:

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

Y recargue la imagen en el código detrás de esta manera:

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

}

Answer 2

Usar "#" como delimitador puede ser útil

Mis imágenes se guardan en una carpeta "oculta" sobre "www" para que solo los usuarios registrados puedan acceder a ellas. Por esta razón no puedo usar el <img src=/somefolder/1023.jpg> pero envío solicitudes al servidor como <img src=?1023> y responde enviando la imagen guardada con el nombre ''1023''.

La aplicación se utiliza para recortar imágenes, por lo que después de una solicitud de ajax para recortar la imagen, se cambia como contenido en el servidor, pero mantiene su nombre original. Para ver el resultado del recorte, una vez completada la solicitud de ajax, la primera imagen se elimina del DOM y se inserta una nueva imagen con el mismo nombre <img src=?1023> .

Para evitar el cobro, agrego a la solicitud la etiqueta "time" junto con "#" para que se convierta en <img src=?1023#1467294764124> . El servidor filtra automáticamente la parte de hash de la solicitud y responde correctamente enviando mi imagen guardada como ''1023''. Por lo tanto, siempre obtengo la última versión de la imagen sin mucha decodificación del lado del servidor.

Answer 3

¿Has intentado restablecer los contenedores de imágenes html. Por supuesto, si es el navegador el que almacena en caché, esto no ayudaría.

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

Answer 4

Algunas veces, en realidad, una solución como ...

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

Tampoco actualizar src correctamente, prueba esto, funcionó para mí ->

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

Answer 5

Basado en la respuesta de @kasper Taeymans.

Si simplemente necesita volver a cargar la imagen (no reemplazar su fuente por algo nuevo), intente:

$(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>

Answer 6

Este podría ser uno de los dos problemas que mencionas.

1. El servidor está almacenando en caché la imagen.
2. JQuery no se activa o al menos no actualiza el atributo

Para ser honesto, creo que es el número dos. Sería mucho más fácil si pudiéramos ver más jQuery. Pero para empezar, intente eliminar primero el atributo y luego vuelva a establecerlo. Sólo para ver si eso ayuda:

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

Incluso si esto funciona, publique algún código ya que no es óptimo, imo :-)

Answer 7

Esto funciona muy bien! sin embargo, si vuelve a cargar el src varias veces, la marca de tiempo también se concatenará a la URL. He modificado la respuesta aceptada para lidiar con eso.

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

Answer 8

Para evitar el almacenamiento en caché y evitar agregar marcas de tiempo infinitas a la URL de la imagen, elimine la marca de tiempo anterior antes de agregar una nueva, así es como lo he hecho.

//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);
}

Answer 9

Parece que es su navegador el que almacena en caché la imagen (que ahora me doy cuenta de que escribió en su pregunta). Puede forzar que el navegador vuelva a cargar la imagen pasando una variable adicional como:

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

Answer 10

Probablemente no sea la mejor manera, pero resolví este problema en el pasado simplemente agregando una marca de tiempo a la URL de la imagen usando JavaScript:

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

La próxima vez que se cargue, la marca de tiempo se establece en la hora actual y la URL es diferente, por lo que el navegador realiza un GET para la imagen en lugar de usar la versión en caché.

Answer 11

Puede que tenga que volver a cargar la fuente de la imagen varias veces. Encontré una solución con Lodash que me funciona bien:

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

Una marca de tiempo existente se truncará y se reemplazará por una nueva.

Answer 12

con una línea sin preocupaciones acerca de la codificación de la imagen en el javascript (gracias a jeerose por las ideas)

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