Preloading images problem.

**Bakuryu** · 06-05-2010 04:53 PM

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.

PHP Code:


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);

}

HTML Code:

<body onload="empezar()">
...
<div id="bigdefault">
<div id="arrows"><a class="arrows" href="#" onclick="irIzq()">&laquo;</a><a class="arrows" href="#" onclick="irDer()">&raquo;</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 here.

Thanks for reading.

**SparoHawk** · 06-05-2010 06:53 PM

Code:

function empezar()
{
    var img = new Image();
        img.onload = function() {
            document.getElementById('txt').innerHTML = te[c];
            document.getElementById('linkz').href = lnk[c];
            document.getElementById('nombre').src = this.src;
            c++;
            
            if (c > im.length)
                c = 0;
            
            t = setTimeout(function(){empezar()}, 5000);
        };
        img.src = im[c];
}

You can have the rotation in a simpler way.

**Bakuryu** · 06-05-2010 07:43 PM

Thanks a lot

This works perfect now.

**Westerly** · 06-06-2010 07:24 AM

Bakuryu:

Here's a way to fade-in images once they have been fully loaded. Assign the class "pagingImg" to each image, as shown. Note the imgSet array is similar to your existing code, which echos image names.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fade-in Image Load</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	var imgPath = "./images/";
	var imgSet = ["CB1.jpg","CB3.jpg","CB2.jpg","CB4.jpg"];  
	var pagingImg = [];

	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;		

	function doneLoad(nInterval,nLoadImg){

		clearInterval(nInterval);
		IE ? nLoadImg.detachEvent('onload', waitLoad, false) : nLoadImg.removeEventListener('load', waitLoad, false);
	}

	function waitLoad(nLoadImg){

		var nOpacity = 0;			
		var nInterval = setInterval(function()
			{
		 	 nOpacity < 100 ? nOpacity = nOpacity + 5 : doneLoad(nInterval,nLoadImg);
		 	 IE ? nLoadImg.style.filter = "alpha(opacity = "+nOpacity+")"
		 	 : nLoadImg.style.opacity = (nOpacity / 100); 
			}, 5);			 
	}

	function init(){

		var nImg = document.getElementsByTagName('img');
		for (i=0; i<nImg.length; i++)
			{
			 if (nImg[i].className == "pagingImg")
				{
				 pagingImg[pagingImg.length] = nImg[i];
				}
			}	
		for (i=0; i<imgSet.length; i++)
			{
		 	 IE ? pagingImg[i].style.filter = "alpha(opacity = 0)" : pagingImg[i].style.opacity = 0;			
		 	 pagingImg[i].onload = function()
				{
			 	 waitLoad(this);
				}	
			 pagingImg[i].src =  imgPath + imgSet[i];			 	
			}		
	}

	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
</head>
<body>

	<div>
		<img src=null class="pagingImg" width="200" height="150" alt="">

		<img src=null class="pagingImg" width="200" height="150" alt="">

		<img src=null class="pagingImg" width="200" height="150" alt="">

		<img src=null class="pagingImg" width="200" height="150" alt="">
	</div>

</body>
</html>

**Bakuryu** · 06-06-2010 11:13 AM

I was actually trying to do something like that; but lacking the knowledge, haha.
Thank you very much.

Thread: Preloading images problem.

Thread Tools

Display

Preloading images problem.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions