El caché del navegador se basa en la URL de la imagen para decidir si la imagen es la misma o no y si se usa la versión almacenada. Significa que si cambiamos algo dentro de la URL y luego intentamos volver a cargar la imagen, el caché ya no podrá cambiar que es el mismo recurso. El caché lo recuperará nuevamente del servidor.
Enfoque: para cambiar la URL sin afectar la imagen, puede cambiar el parámetro que se puede adjuntar al final de la URL. El parámetro debe ser único. Podemos usar una marca de tiempo, la URL siempre será única.
Para actualizar la imagen en JavaScript, simplemente podemos seleccionar el elemento img y modificar su atributo src para que sea el de la imagen de destino, junto con el parámetro de marca de tiempo para asegurarnos de que no acceda a él desde el caché.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Refresh Image</title>
</head>
<body>
<!-- Display the image -->
<img id="gfgimage" src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-20.png"
width="500" />
<script>
// Create a timestamp
var timestamp = new Date().getTime();
// Get the image element
var image = document.getElementById("gfgimage");
// Adding the timestamp parameter to image src
image.src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-20.png?t=" + timestamp;
console.log(image.src);
</script>
</body>
</html>
Producción:
Ahora, incluso si la imagen se reemplaza con una nueva imagen, cargará la nueva imagen. En general, esto puede tener algunos problemas de rendimiento, ya que no usará la imagen del caché y tendrá que usar la imagen del servidor siempre.
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por tarundhamor y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA