Pre-cargar imágenes para mostrarlas después (problemas de cache)
Publicado por Orlando Zarate (5 intervenciones) el 17/10/2019 01:05:15
Hola, mi proyecto es básicamente un catalogo en linea, tengo un problema de "imagenes+cache" y lo he solucionado pero la solución no me convence, explico.
Digamos que llamo a una imagen así:
Todo perfecto, llama a la imagen y si dan clic entra a la funcion "cambiar" en mi .JS y hace el cambio de foto
Ahora, si modifico en el servidor la imagen "principal" , de alguna forma el servidor le comunica al navegador que la imagen cambio y al dar F5 se actualiza todo perfecto, me muestra la nueva imagen que subi, esto porque el codigo PHP se ejecuta en servidor.
El problema es que el JavaScript se ejecuta en el cliente, entonces al dar clic (evento onClic) y cambiar la imagen "principal" por la imagen "secundaria", esta muestra la imagen "secundaria" que tiene en cache, aunque yo haya modificado la imagen "secundaria" en el servidor.
Entonces al modificar en el servidor la imagen "principal" y "secundaria" y dar F5 solo actualiza en la chache la imagen "principal", cosa que comprendo pues la imagen "principal" la llamo con PHP (servidor) y la imagen "secundaria" la llamo con JavaScript (cliente).
Lo "solucione" en la funcion de JavaScript añadiendole a la variable "nuevaruta" una variable "id" tipo $_GET
Pero no me convence esto ya que aunque no haya cambiado la imagen "secundaria" se vuelve a cargar de manera forzada entonces aumento el consumo de datos.
Entonces pense que si cargaba en el archivo PHP (servidor) desde un inicio la imagen "principal" y la imagen "secundaria" pero ocultando la "secundaria", se cargaría en cache, pero no, la imagen principal si se actualiza en el cache pero la imagen secundaria no.
Así lo intente:
Estaba seguro que funcionaria pero no, si cargo la imagen "secundaria" sin ocultarla (quitando el style='display: none') si se actualiza en el cache la imagen secundaria, pero pues la idea no es mostrar ambas imágenes desde un principio si no mostrar la principal y si dan clic mostrar la secundaria.
Ojala si alguien tiene experiencia en esto me pueda ayudar, como lo comente, lo tengo "solucionado" pero forzarlo y aumentar el consumo de datos no me convence.
Digamos que llamo a una imagen así:
1
echo "<img src='". $ruta ."' onClick='cambiar(\"$ruta\");' />";
Todo perfecto, llama a la imagen y si dan clic entra a la funcion "cambiar" en mi .JS y hace el cambio de foto
Ahora, si modifico en el servidor la imagen "principal" , de alguna forma el servidor le comunica al navegador que la imagen cambio y al dar F5 se actualiza todo perfecto, me muestra la nueva imagen que subi, esto porque el codigo PHP se ejecuta en servidor.
El problema es que el JavaScript se ejecuta en el cliente, entonces al dar clic (evento onClic) y cambiar la imagen "principal" por la imagen "secundaria", esta muestra la imagen "secundaria" que tiene en cache, aunque yo haya modificado la imagen "secundaria" en el servidor.
Entonces al modificar en el servidor la imagen "principal" y "secundaria" y dar F5 solo actualiza en la chache la imagen "principal", cosa que comprendo pues la imagen "principal" la llamo con PHP (servidor) y la imagen "secundaria" la llamo con JavaScript (cliente).
Lo "solucione" en la funcion de JavaScript añadiendole a la variable "nuevaruta" una variable "id" tipo $_GET
1
nuevaruta=array[0] + "-02.jpg?id=" + Math.random();
Pero no me convence esto ya que aunque no haya cambiado la imagen "secundaria" se vuelve a cargar de manera forzada entonces aumento el consumo de datos.
Entonces pense que si cargaba en el archivo PHP (servidor) desde un inicio la imagen "principal" y la imagen "secundaria" pero ocultando la "secundaria", se cargaría en cache, pero no, la imagen principal si se actualiza en el cache pero la imagen secundaria no.
Así lo intente:
1
2
echo "<img src='". $ruta ."' onClick='cambiar(\"$ruta\");' />";
echo "<img src='". $rutasecundaria ."' style='display: none' />";
Estaba seguro que funcionaria pero no, si cargo la imagen "secundaria" sin ocultarla (quitando el style='display: none') si se actualiza en el cache la imagen secundaria, pero pues la idea no es mostrar ambas imágenes desde un principio si no mostrar la principal y si dan clic mostrar la secundaria.
Ojala si alguien tiene experiencia en esto me pueda ayudar, como lo comente, lo tengo "solucionado" pero forzarlo y aumentar el consumo de datos no me convence.
Valora esta pregunta
0