Actualizar imagen al recargar pagina

cmlm19 · #1 (**permalink**) 14/06/2006, 21:01

Saludos!!!

Tengo un problema con una imagen que no se me actualiza al momento de reenviar la pagina. Tengo un furmulario donde solicito un año y envio el formulario por POST hacia la misma pagina; luego usando PHP genero una grafica estadistica (un archivo de imagen PNG) que varia dependiendo del año introducido. El problema es que la grafica la primera vez se muestra bien, pero a partir de la segunda vez la pagina sigue mostrando la misma grafica de la 1ra vez a pesar de que la grafica generada es diferente. Entonces le doy F5 y ahi si muestra la grafica que es. Necesito que el usuario no tenga que pulsar F5 para ver la grafica verdadera. Entonces probe este codigo pero no me funciono.

var imag=document.getElementById("grafica");
if(imag)
{ imag.src="./bar_encomiendas.png";
imag.refresh();
}

Debe haber alguna forma de actualizar la imagen usando JS sin necesidad de pulsar F5 o actualizar la pagina manualmente. O la otra que se me ocurre es obligar al navegador a que actualice las imagenes y no use las de la cache. Pero no se como

Gracias de antemano por toda la ayuda.

Saludos
Carlos

safe · #2 (**permalink**) 14/06/2006, 21:48

yo tuve el mismo problema durante muicho tiempo y nunca nadie me supo ayudar. Hasta que un dia por casualidad encontre la respuesta.
Le agregas una variable a la ruta de la imagen con un valor que cambio al azar.

ejemplo (si usas PHP):

Código:

<img src="imagen.png?x=<?=md5(time())?>" />

cmlm19 · #3 (**permalink**) 15/06/2006, 05:07

Gracias compañero SAFE ese truco funciona perfectamente y soluciona mi problema

Saludos.

civancorral · #4 (**permalink**) 24/09/2008, 16:20

oyes disculpa a lo mejor no es aqui donde debo de preguntar pero mi pregunta es que si como puedes utilizar ese metodo en flash

noreligion_79 · #5 (**permalink**) 14/11/2008, 06:48

Compañeros habrà alguna forma de realizar esto en simple llano html?

Es decir tengo esta imagen...

<img src="../Work/L2_DELSUR_ON_LINE.jpg">

como haria para añadirle una valor al azar a dicha direccion cada vez que cargue la pagina?
Esto con la intencion de forzar siempre una descargar de la imagen directa del servidor y no de la que se queda guardada en cache del navegador local.

Panino5001 · #6 (**permalink**) 14/11/2008, 07:10

Imagino que te referís a cómo hacerlo en javascript. Probá así:

Código:

<head>
<script>
onload=function(){
var im=document.getElementsByTagName('img');
for(var i=0,l=im.length;i<l;i++){
im[i].src=im[i].src+'?'+Math.random();
}
}
</script>
</head>

noreligion_79 · #7 (**permalink**) 14/11/2008, 09:47

Cita:

Iniciado por Panino5001

Imagino que te referís a cómo hacerlo en javascript. Probá así:

Código:

<head>
<script>
onload=function(){
var im=document.getElementsByTagName('img');
for(var i=0,l=im.length;i<l;i++){
im[i].src=im[i].src+'?'+Math.random();
}
}
</script>
</head>

Amigo y como mostrari la imagen en pantalla?
con un document.write?

David · #8 (**permalink**) 14/11/2008, 09:58

Si lees el código te darás cuenta que cambia todos los src de los tag img por el ?aleatorio.

noreligion_79 · #9 (**permalink**) 14/11/2008, 10:09

Entiendo que en esta parte le esta asignado a la variable im el valor de la imagen y luego hace una rutina para generar un numero aleatorio.
Mi pregunta es si luego de este script tengo que colocar la ubicaciones la imagen

<img name="webcam" src="webcam.jpg">

----------------------------------------------------------------------
var im=document.getElementsByTagName('img');

for(var i=0,l=im.length;i<l;i++){
im[i].src=im[i].src+'?'+Math.random();
}
}
</script>
</head>

David · #10 (**permalink**) 14/11/2008, 10:16

Sí, los img los puedes dejar tal y como están, que el script hace el resto del trabajo.

noreligion_79 · #11 (**permalink**) 14/11/2008, 10:30

Probè el codigo pero aun asi no me funciona.....
Abro la pagina y me muestra x imagen...Ok...luego cierro el explorer...
cambio dicha imagen..es decir coloco otra con el mismo nombre y lo subo nuevamente al servidor intranet del trabajoo.
Al abrir nuevamente el explorer me sale la pagina anterior....tengo que darle Ctrl + F5 para poder cargar la actual.
He intentado casi de todo y no hallo con el problema...

Este es una pagina con la que estoy haciendo las pruebas...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mi webcam</title>

<script>
onload=function()
{
var im=document.getElementsByTagName('webcam');
for(var i=0,l=im.length;i<l;i++){
im[i].src=im[i].src+'?'+Math.random();
}}
</script>
</head>
<img name="webcam" src="webcam.jpg" width="320" height="240" border="0">
<body>
</body>
</html>

Panino5001 · #12 (**permalink**) 14/11/2008, 10:58

Esto no existe:

Código PHP:

  document.getElementsByTagName('webcam');

No existe un tag html llamado webcam.
El tag es img, tal como te lo pasé. Probá el código que te pasé sin modificarlo.

noreligion_79 · #13 (**permalink**) 17/11/2008, 07:08

Ok......el codigo asi si funciona........
pero lo que si me doy cuenta es que....dicha pagina tiene un Refresh de 10 segundos....y cuando lo hace.....muestra la imagen que se vio anteriormente durante un parpadeo y luego carga la correcta....es como si quisiera levantar la imagen vieja pero luego el script lo obliga a mostrar la actual...y eso que en la cabecera de la pagina le coloque lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="refresh" content="600; url=http://bitacora.delsur.com.ve/bitacora/Paginas/2%20Del%20Sur%20On%20Line.htm">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sistema Abanks en Linea</title>

Panino5001 · #14 (**permalink**) 17/11/2008, 07:46

En ese caso, probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
<script> 
// DF1.1 :: domFunction  
// ***************************************************** 
// DOM scripting by brothercake -- http://www.brothercake.com/ 
// GNU Lesser General Public License -- http://www.gnu.org/licenses/lgpl.html 
//****************************************************** 
 
 
 
 
//DOM-ready watcher 
function domFunction(f, a) 
{ 
    //initialise the counter 
    var n = 0; 
     
    //start the timer 
    var t = setInterval(function() 
    { 
        //continue flag indicates whether to continue to the next iteration 
        //assume that we are going unless specified otherwise 
        var c = true; 
 
        //increase the counter 
        n++; 
     
        //if DOM methods are supported, and the body element exists 
        //(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]  
        //in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section) 
        if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null)) 
        { 
            //set the continue flag to false 
            //because other things being equal, we're not going to continue 
            c = false; 
 
            //but ... if the arguments object is there 
            if(typeof a == 'object') 
            { 
                //iterate through the object 
                for(var i in a) 
                { 
                    //if its value is "id" and the element with the given ID doesn't exist  
                    //or its value is "tag" and the specified collection has no members 
                    if 
                    ( 
                        (a[i] == 'id' && document.getElementById(i) == null) 
                        || 
                        (a[i] == 'tag' && document.getElementsByTagName(i).length < 1) 
                    )  
                    {  
                        //set the continue flag back to true 
                        //because a specific element or collection doesn't exist 
                        c = true;  
 
                        //no need to finish this loop 
                        break;  
                    } 
                } 
            } 
 
            //if we're not continuing 
            //we can call the argument function and clear the timer 
            if(!c) { f(); clearInterval(t); } 
        } 
         
        //if the timer has reached 60 (so timeout after 15 seconds) 
        //in practise, I've never seen this take longer than 7 iterations [in kde 3  
        //in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time] 
        if(n >= 60) 
        { 
            //clear the timer 
            clearInterval(t); 
        } 
         
    }, 250); 
}; 
domFunction(function() 
{ 
var im=document.getElementById('webcam'); 
im.src=im.src+'?'+Math.random(); 
}, {id:'webcam'}); 
</script> 
</head> 
 
<body> 
<img id="webcam" name="webcam" src="webcam.jpg" width="320" height="240" border="0"> 
</body> 
</html>