Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preloading images and slideshow doesn't work in NS!! It's urgent!!

    Hi

    After a long time I'm back in this js forums again!! Ok, let's see what I have. I'm having an array of images, better to say a text array that contains the address to some images, and I also have an image tag in the page by the id of "tv" and I'm trying to show this images whenever user clicks on the Next, Back buttons.

    The problem is (I think) the caching of browsers. Because the size of images are around 20k and changing them continusly was making some problems, like it didn't show the 2nd or 3rd picture. So, I thought it's better that I preload the images. But I don't wana preload them b4 they're requested by the user. So, I'm trying this code:

    Code:
    index = 0;
    imgArray = Array();
    
    imgArray[0] = '../propertyPics/a1/main.jpg'; 
    imgArray[1] = '../propertyPics/a1/1.jpg?684305830'; 
    imgArray[2] = '../propertyPics/a1/3.jpg?398547670'; 
    imgArray[3] = '../propertyPics/a1/4.jpg?597487589'; 
    imgArray[4] = '../propertyPics/a1/7.jpg?889515954'; 
    imgArray[5] = '../propertyPics/a1/8.jpg?1159394538'; 
    imgArray[6] = '../propertyPics/a1/9.jpg?822955303'; 
    imgArray[7] = '../propertyPics/a1/10.jpg?279933176'; 
    imgArray[8] = '../propertyPics/a1/11.jpg?594333934'; 
    
    isLoading = false;
    
    
    function next()
    {
    	if ( isLoading )
    	{
    		return;
    	}
    	
    	++index;
    	index = ( index >= imgArray.length ) ? ( 0 ) : ( index );
    
    	isLoading = true;
    	temp = new Image();
    	temp.src = imgArray[index];
    	temp.onload = function() 
    				  {
    					  document.getElementById("tv").src = this.src; 
    						  document.getElementById("picNumber").innerHTML = index + 1;
    						  						  isLoading = false; 
    				  }
    }
    
    function back()
    {
    	if ( isLoading )
    		return;
    
    	--index;
    	index = ( index < 0 ) ? ( imgArray.length-1 ) : ( index );
    
    	isLoading = true;
    	temp = new Image();
    	temp.src = imgArray[index];
    	temp.onload = function() 
    				  { 
    					  document.getElementById("tv").src = this.src; 
    						  document.getElementById("picNumber").innerHTML = index + 1;
    						  						  isLoading = false; 
    				  }
    }
    Then I noticed when I use this code, it works fine, but whenever I try to bring a picture that was already loaded, it doesn't work. I mean the onload of temp doesn't trigger and isLoading doesn't get false and my functions don't load. So, I figured out that I should only load an image once, I mean use the temp variable for it once, the 2nd time, I shouldn't use it or it doesn't work. So, Idecided to put the name of all loaded images in a stack and then when next()/back() is called, I see if the name is in that stack, if yes, I don't preload it, ir not, do whatever I was doing. So, I changed it to this:

    Code:
    function in_array( arrayName, hayStack )
    {
    	for (var i=0; i<arrayName.length; i++)
    		if ( arrayName[i] == hayStack )
    			return true;
    	
    	return false;
    }
    
    loadedPics = Array();
    loadedPics.push( imgArray[0] );
    isLoading = false;
    
    
    function next()
    {
    	if ( isLoading )
    	{
    		return;
    	}
    	
    	++index;
    	index = ( index >= imgArray.length ) ? ( 0 ) : ( index );
    	if ( in_array( loadedPics, imgArray[index] ) )
    	{
    		document.getElementById("tv").src = imgArray[index];
    		document.getElementById("picNumber").innerHTML = index + 1;
    	}
    	else
    	{
    		isLoading = true;
    		temp = new Image();
    		temp.src = imgArray[index];
    		temp.onload = function() 
    					  {
    						  document.getElementById("tv").src = this.src; 
    						  document.getElementById("picNumber").innerHTML = index + 1;
    						  loadedPics.push( imgArray[index] );
    						  isLoading = false; 
    					  }
    	}
    }
    
    function back()
    {
    	if ( isLoading )
    		return;
    
    	--index;
    	index = ( index < 0 ) ? ( imgArray.length-1 ) : ( index );
    
    	if ( in_array( loadedPics, imgArray[index] ) )
    	{
    		document.getElementById("tv").src = imgArray[index];
    		document.getElementById("picNumber").innerHTML = index + 1;
    	}
    	else
    	{
    		isLoading = true;
    		temp = new Image();
    		temp.src = imgArray[index];
    		temp.onload = function() 
    					  { 
    						  document.getElementById("tv").src = this.src; 
    						  document.getElementById("picNumber").innerHTML = index + 1;
    						  loadedPics.push( imgArray[index] );
    						  isLoading = false; 
    					  }
    	}
    
    }
    Now it works in IE just fine, but it doesn't do anything in NS7. I'm sure that temp.onload doesn't work and I dunno why. As you probably noticed from the random number added to the end of images' address in my imgArray, I'm making this code by a server side language and I'm makig those numbers to stop caching of browser. I'm just confused again and don't know what to do!! I realyl want it to function in NS too. Any help is appericiated.

    Thanks
    Last edited by ConfusedOfLife; 11-05-2003 at 08:50 AM.


 

Posting Permissions

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