actualizar imagen sin recargar

Montes28 · #1 (**permalink**) 23/07/2012, 09:52

hola amigos espero me puedan ayudar

necesito actualizar una imagen pero que no se recarge la pagina se me ocurre actualizar el src

o que me pueden aconsejar ?

maycolalvarez · #2 (**permalink**) 23/07/2012, 12:05

puedes actualizar el src, pero ten en cuenta que por caché no te funcione, para ello existen varias alternativas:

1 - usar el parámetro fantasma, que consiste en generar un numero aleatorio y concatenarlo al src

2 - expirar la cache desde un script del lado del servidor, donde lo uses como puente entre la imagen, expirando la caché

3 - configurar la extención del archivo para que el web server expire la caché

para todos los casos la primera vez debes de borrar la caché del navegador, luego funciona por su cuenta

Montes28 · #3 (**permalink**) 23/07/2012, 13:00

maycolalvarez gracias por contestar

estoy utilizando html y jquery me podrias indicar con ejemplo lo que me indicas.

la imagen vcm01-2.jpg se actualiza cada cierto tiempo necesito cargar la imagen actualizada

Código HTML:

Ver original<img src="//192.168.102.2/ew/webcam/vcm01/vcm01-2.jpg" alt="" width="1600" height="1200" />

maycolalvarez · #4 (**permalink**) 23/07/2012, 13:22

ya le indique las opciones, en su caso como supongo que proviene de una webcam con flujo de secuencias jpg debe de aplicar un setInterval para actualizar cada imágen, dudo mucho que las mismas vengan sin los headers anti-caché, en tal caso el parámetro fantasma es ideal, o revisar la configuración de las cámaras para ver si puede cambiar eso, o usar un iframe

Montes28 · #5 (**permalink**) 23/07/2012, 13:23

buscado por ahi encontr algo

http://stackoverflow.com/questions/2...mage-in-jquery

voy a probarlo

Montes28 · #6 (**permalink**) 23/07/2012, 13:30

maycolalvarez gracias por responder

la imagen siempre va a tener el mismo nombre vcm01-2.jpg , me confundes un poco con el parametro fantasma

Pablo Ayala · #7 (**permalink**) 23/07/2012, 14:20

Cita:

Iniciado por Montes28

maycolalvarez gracias por responder

la imagen siempre va a tener el mismo nombre vcm01-2.jpg , me confundes un poco con el parametro fantasma

Hola!

Código HTML:

Ver original<head>
<script>
 
function reload(){
var aleatorio = Math.ceil(Math.random()*100);
 
document.getElementById('laimagen').innerHTML = '<img src="//192.168.102.2/ew/webcam/vcm01/vcm01-2.jpg?'+aleatorio+'" alt="" width="1600" height="1200" />';
 
}
</script>
</head>
 
<body onload="setInterval("reload()",2000);">......
 
 
<div id="laimagen">
<img src="//192.168.102.2/ew/webcam/vcm01/vcm01-2.jpg" alt="" width="1600" height="1200" />
</div>

Montes28 · #8 (**permalink**) 23/07/2012, 15:32

Pablo Ayala gracias por responder estoy haciendo lo que me indicas pero funciona al recargar la pagina y eso es lo que necesito evitar

este es mi codigo

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus  Demos</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
<script>
 
function reload(){
var aleatorio = Math.ceil(Math.random()*100);
 
document.getElementById('fragment-1').innerHTML = '<img src="images/image1.jpg?'+aleatorio+'" alt="" />';
 
}
</script>
</head>
<body onload="setInterval("reload()",2000);">
 
 
        <h3>&raquo; Featured Content Slider Using jQuery</h3>
        
        <div id="featured" >
          <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
          </ul>
 
        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="images/image1.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
             </div>
        </div>
 
        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
             </div>
        </div>
 
        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
             </div>
        </div>
 
        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
             </div>
        </div>
 
        </div>
    </div>
 
 
</body>
</html>

maycolalvarez · #9 (**permalink**) 24/07/2012, 06:46

El código de @Pablo esta bien, en ningún momento requiere recargar la pagina, no se a que se refiere

Pablo Ayala · #10 (**permalink**) 24/07/2012, 07:53

hola.... mmm ahora si... mi no entender.
Lo siento,

maycolalvarez · #11 (**permalink**) 24/07/2012, 12:05

Lo único que hay que hacer es cambiar el innerHTML, y actualizar el src colocándole un id al img, vamos que no es complicado de hacer!

Montes28 · #12 (**permalink**) 25/07/2012, 15:35

amigos quiero agradecerles por sus comentarios me ayudaron mucho tuve una solucion pero tengo otro requeriemiento, a constinuacion les muestro mi solucion

Código Javascript:

Ver original<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
        //setInterval('reloadImages()', 60000); // 60 seconds
    });
</script>
<script type="text/javascript">
$(document).ready(function() {
   setInterval('reloadImages()', 60000); // 60 seconds
});
function reloadImages()
{
  $('#imagen1').attr('src', '//192.168.102.2/ew/webcam/vcm01/vcm01-2.jpg?' + Math.random());
 
}
</script>

Código HTML:

Ver original<div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="//192.168.102.2/ew/webcam/vcm01/vcm01-2.jpg" id="imagen1" alt="" width="1600" height="1000" />
             <div class="info" >
                <h2><a href="#" >Volcán Cerro Machin</a></h2>
                <p>Perspectiva del Volcán Cerro Machín desde el sector alto de Toche.</p>
             </div>
        </div>

pero ahora necesito el mismo comportamiento de src pero con el nombre de una imagen que cambia cada minuto me explico , osea cambia el nombre del archivo.

Persp20120702_061015.jpg
Persp20120702_061110.jpg
Persp20120702_061214.jpg
Persp20120702_061309.jpg
.
.
.
.
.

Pablo Ayala · #13 (**permalink**) 26/07/2012, 11:36

Y esos nombres como los obtienes?

Montes28 · #14 (**permalink**) 26/07/2012, 18:06

las imagenes llegan desde una camaraweb la cual se sincroniza con un reloj satelital y llega al servidor con ese nombre , cada minuto llega la imagen