www.webdeveloper.com
Results 1 to 5 of 5

Thread: Preloading images problem.

  1. #1
    Join Date
    Jun 2010
    Posts
    3

    Preloading images problem.

    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.

  2. #2
    Join Date
    Jul 2007
    Posts
    386
    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.

  3. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks a lot This works perfect now.

  4. #4
    Join Date
    May 2010
    Posts
    109
    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>

  5. #5
    Join Date
    Jun 2010
    Posts
    3
    I was actually trying to do something like that; but lacking the knowledge, haha.
    Thank you very much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles