Menu
Hello, I’ve recently started using JavaScript. I have a script that changes an image in a certain area every 5 seconds. I used (or trying to) a onload event so it loads all these images first (there’s 5 of them) before starting the countdown. before this a “loading image”, along with a “loading” text shows.
Along with the image, the text change too, each image is associated to a text.
The problem is that the text starts changing earlier than the images, leaving them desynchronized; they sync after it starts from the first image again.
This happens if it takes some time to load the images, if they load fast enough then the desynchronization doesn’t happen. I was wondering if I’m doing something wrong, or what’s going on.
Here’s the code that does this.
[code=php]
var c = 0;
var i = 0;
imagenObj = new Image();
loadingimg = new Image();
loadingimg = “images/bignews/cargando.gif”;
var im = new Array();
im[0] = “images/bignews/<?php echo $r1[‘imagen’]; ?>.jpg”;
im[1] = “images/bignews/<?php echo $r2[‘imagen’]; ?>.jpg”;
im[2] = “images/bignews/<?php echo $r3[‘imagen’]; ?>.jpg”;
im[3] = “images/bignews/<?php echo $r4[‘imagen’]; ?>.jpg”;
im[4] = “images/bignews/<?php echo $r5[‘imagen’]; ?>.jpg”;
im[5] = “images/bignews/gw2.jpg”;
var te = new Array();
te[0] = “<?php echo $r1[‘resumen’]; ?>”;
te[1] = “<?php echo $r2[‘resumen’]; ?>”;
te[2] = “<?php echo $r3[‘resumen’]; ?>”;
te[3] = “<?php echo $r4[‘resumen’]; ?>”;
te[4] = “<?php echo $r5[‘resumen’]; ?>”;
var lnk = new Array();
lnk[0] = “<?php echo $r1[‘tipo’].’/’.$r1[‘n_id’].’-‘.$r1[‘titulo’]; ?>”;
lnk[1] = “<?php echo $r2[‘tipo’].’/’.$r2[‘n_id’].’-‘.$r2[‘titulo’]; ?>”;
lnk[2] = “<?php echo $r3[‘tipo’].’/’.$r3[‘n_id’].’-‘.$r3[‘titulo’]; ?>”;
lnk[3] = “<?php echo $r4[‘tipo’].’/’.$r4[‘n_id’].’-‘.$r4[‘titulo’]; ?>”;
lnk[4] = “<?php echo $r5[‘tipo’].’/’.$r5[‘n_id’].’-‘.$r5[‘titulo’]; ?>”;
function empezar()
{
document.getElementById(“arrows”).style.opacity = 0.85;
for(i==0; i<=5; i++)
{
imagenObj.src = im[i];
}
imagenObj.onload = goimagen();
}
function goimagen()
{
t = setTimeout(“timedImage()”,1000);
}
function timedImage()
{
document.getElementById(“nombre”).src = im[c];
document.getElementById(‘txt’).innerHTML=te[c];
document.getElementById(‘linkz’).href=lnk[c];
c=c+1;
if(c > 4)
{
c=0;
}
t = setTimeout(timedImage,5000);
}
[code=html]
<body onload=”empezar()”>
…
<div id=”bigdefault”>
<div id=”arrows”><a class=”arrows” href=”#” onclick=”irIzq()”>«</a><a class=”arrows” href=”#” onclick=”irDer()”>»</a></div>
<a id=”linkz” onmouseover=”over()” onmouseout=”out()”><img id=”nombre” src=”images/bignews/cargando.gif”/></a><p id=”txt”>Cargando…</p></div>
…
I uploaded a demo [URL=http://redmmo.com.ar/demo/]here
Thanks for reading.