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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Intit Image arrays through iteration

    Hi folks.
    I would like to be able to initialize an image array
    through code rather than typing.

    Most times I see setups like this:
    //preload images
    var image1=new Image()
    image1.src="image.jpg"
    var image2=new Image()
    image2.src="image2.jpg"
    etc.

    Thats fine for lets say 10 or so images
    but what if it's like 100?
    Even 40 is alot of del,backspace,highlight,etc

    I decided to write a function to do the work
    here it is but it does not work
    I'm more adept in c so this JS is new to me
    Thank you for any help

    -Paul

    Code:
    function Preload(){
    var x=1
    var numimages= 100
    
    //init images 1-99
    
    function Preload(){
    var x=1
    
    for(;x<42;x++){
    eval("var image"+x+"=new Image()")
    eval("image"+x+".src"=tornado"+x+".jpg" )
    }
    
    }

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a simular script I wrote some time ago...

    Code:
    <html>
    <head>
    <title>Post Load And Display Sequentially Numbered Images</title>
    <BASE HREF="http://www.freewebs.com/foufou/">
    <script type="text/javascript">
     <!--// WRITTEN BY: WillyDuitt@hotmail.com  02/04/2004 //;
     // PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
     // HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
        var howMany = 4;
     // USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
        var firstImage  = 'eliza1.jpg';
     // HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ½sec) //;
        var speed = 5;
     // USING QUOTES. USE FILTERS FOR IE USERS(yes | no)?  //;
        var filters = "yes";
    
     ////////////////////////////////////////////////////////;
     // GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
        var startNumber = (/\d+(?=\.)/.exec(firstImage));
        var lastNumber  = (startNumber*1)+(howMany-1);
        var nextImage   = (startNumber);
    
      function loadSlides(){
        for(var i=startNumber;i<=lastNumber;i++){
        var postLoad = new Array();
            postLoad[i] = new Image();
            postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
        }   showSlides("slider");
      }
    
      function showSlides(slider){
       var image = document.images[slider];
        if(document.all && filters.toLowerCase() == "yes"){
           image.style.filter = "blendTrans(duration=3)";
           image.filters.blendTrans.Apply();
           image.filters.blendTrans.Play();
        }    if(nextImage > lastNumber){ nextImage = startNumber };
                image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
                setTimeout('showSlides("slider")',speed*1000);
                nextImage++;
      }
     //-->
    </script>
    </head>
    
    <body onload="loadSlides()">
     <div style="text-align:center;width:350px;height:280px">
      <img name="slider" width="350" height="280" src="eliza1.jpg">
       </div>
    
    </body>
    </html>
    ......Willy

  • #3
    New Coder
    Join Date
    Dec 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks willy!
    I have a few questions about some parts...
    1) it works ok although it's choppy and not suitable
    for an animation- maybe you can provide
    insight on how to smooth the transitions
    2)

    Code:
    function loadSlides(){
        for(var i=startNumber;i<=lastNumber;i++){
            var postLoad    =   new  Array();
                 postLoad[i] =   new Image();
                 postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
        }   showSlides("slider");
      }
    
      function showSlides(slider){
       var image = document.images[slider];
        if(document.all && filters.toLowerCase() == "yes"){
           image.style.filter = "blendTrans(duration=3)";
           image.filters.blendTrans.Apply();
           image.filters.blendTrans.Play();
        }    if(nextImage > lastNumber){ nextImage = startNumber };
                image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
                setTimeout('showSlides("slider")',speed*1000);
                nextImage++;
      }
    I'm a bit confused about 'postLoad'
    used in the loop inside loadSlides().
    It is static ?
    In C++ this code would declare new variable on each iteration.
    ok and then the Array object is instanciated as well
    but how many elements does it return ? Why create a new array
    on each iteration?
    Also a string is passed to
    It looks weird ,thats all
    Thanks for any clarification showSlides() but it's used as
    here -> var image = document.images[slider];
    how can slider be used as an element accessor ?
    Unless it's using the name parameter to reference the correct
    displacement in the image array.
    Thanks for any input
    -Paul
    Last edited by paul6253; 01-17-2005 at 09:09 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts
    the issue with your code is trying to dynamically name variables, use an array

    also, its a good idea to start thinking of item 0 as the first in a list, rather than item 1 ... its traditional compsci, and it makes things much easier

    Code:
    function Preload()
    {
      var i
      var image = []
    
      for(i=0;i<41;i++)
      {
        image[i]=new Image()
        var name = ""
        name = "tornado"+i+".jpg"
        image[i].src = name
      }
    }

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by paul6253
    thanks willy!
    I have a few questions about some parts...
    1) it works ok although it's choppy and not suitable
    for an animation- maybe you can provide
    insight on how to smooth the transitions
    2) I'm a bit confused about 'postLoad'
    used in the loop inside loadSlides().
    It is static ?
    In C++ this code would declare new variable on each iteration.
    ok and then the Array object is instanciated as well
    but how many elements does it return ? Why create a new array
    on each iteration?
    Also a string is passed to
    It looks weird ,thats all
    Thanks for any clarification showSlides() but it's used as
    here -> var image = document.images[slider];
    how can slider be used as an element accessor ?
    Unless it's using the name parameter to reference the correct
    displacement in the image array.
    Thanks for any input
    -Paul
    1) If you want to use the slider part of the script for animations, try removing the transitions either completely or by: var filters = "no";... The filters is IE only anyway...

    2) Yes, var postLoad = new Array(); should be taken out of the for loop if you wish to access the array other than simply caching the images... Probably will be a slight speed improvement also...

    And prior to your editting your post I noticed you asked the difference between preloading and postloading...

    Preloading is generally called in the HEAD outside of a function and was originally used to preload a limited number of small byte images often used in rollover so the images were immediately available on page load... The problem with using preloading for a signficant number of images or a limited number of large byte images is that it stalls the initial display of the page while these images are loaded into cache... If a user is on dialup and you are preloading 10 56K images you could possibly stalling the page for 10 seconds prior to any content is displayed and in which case, most of your visitors have already left...

    Postloading solves this by wrapping the preload in a function and calling body onload and thus does not begin caching the images until the document has already been displayed...

    Anyways, removing the filters and decreasing the speed should work for your animation problems... But had I known that your ultimate need was use for animation I would have provided another example... Eitherway, my intention was to provide a working example of how to cache simularly named but consectutive numbered images without the need to declare each image name...

    ....Willy

    BTW: slider the arguement is passing slider the image name... showSlides("slider");

  • #6
    New Coder
    Join Date
    Dec 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you willy for the clarification!
    signedpiper-
    Yes, I agree with you generally about indexing from zero
    however , I think it's trivial and certainly not 'easier ' for most
    4th generation programmers to grasp.
    BTW , you are conversing with someone who has designed,implemented,and deployed embedded software for various chips.
    Im an old dog trying to learn some new tricks but
    I think I know something about program logic!
    Thankyou for your code snippet, it made sense.

    -Paul


  •  

    Posting Permissions

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