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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    loading images into an array, then drawing to canvas

    Code:
    <html>
        <head>
            <title>test</title>
        </head>
        <body>
            <script language = "javaScript">
                var clouds = [];
                var i = 0;
                while(i <= 5)                {
                        var cld = new Image();
                        cld.onload = function()
                            {
                                clouds.push(cld);
                            }
                        cld.src = "cloud.png";
                        i++;   
                    }
                document.write(clouds.length);
            </script>
        </body>
    </html>
    Where am I messing up clouds.length returns 0. Why?
    I know this is simple, but it will get more complex. I can search for the code, but I would like feedback as to what I'm doing wrong. This is more than likely going to be a multi stage question. More to come...

    ------

    Also, I would like to say that this is my first post. Thanks in advance to those who reply.
    Last edited by dreamcaster; 03-23-2012 at 04:41 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Image loading like that is an asynchronous task. The while loop will long be finished before even one of the onload handlers will be triggered. And only inside the onload handlers you change "clouds". Directly after the while loop, clouds.length is still 0 then.

    Btw it doesn't make sense to me that you create 5 new images for only one "src".

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, there are 6 different images, actually. The idea is to have a canvas in the BG and have clouds scrolling from either side. This is more of an example using the same technique.

    Thanks for the thanks for the tip on the image loader.

    The idea is to populate this array just to hold the clouds and select from it.

    Next, have another array for 'active' clouds on the screen; this randomly selects maybe 12 clouds 6 on either side.

    Now, maybe my question should be, how should I populate the first array?

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look, I don't need my hand held. Just need help loading the images into the first array. I'm pretty sure I can get the rest.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    But you did that already with your first code (except that you need to change the "src" attribute for every new image) ... I don't understand the problem
    Code:
    var imageSrc = ["clowd1.png", "clowd2.png", "clowd3.png", "clowd4.png", "clowd5.png", "clowd6.png"];
                var clouds = [];
                var i = 0;
                while(i <= 5)                {
                        var cld = new Image();
                        cld.onload = function()
                            {
                                clouds.push(cld);
                            }
                        cld.src = imageSrc[i];
                        i++;   
                    }


  •  

    Tags for this Thread

    Posting Permissions

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