Home/ Questions/Q 7641637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:58:30+00:00

I wanted to call a function when all required images are loaded. The number

  • 0

I wanted to call a function when all required images are loaded. The number of images is known in advance, so I tried attaching a function call to the onload event of each image and count the number of times it was called.

<html>

<head>
    <script>

    var tractor;

    function Tractor()
    {
        this.init_graphics();
    }

    Tractor.prototype.init_graphics = function()
    {
        this.gr_max = 3;
        this.load_count = 0;

        this.loading_complete(); // #1 test call, works OK

        this.img1 = new Image();
        this.img1.onload = this.loading_complete; // #2 gets called, but gr_max = undefined, load_count = NaN
        this.img1.src = "http://dl.dropbox.com/u/217824/tmp/rearwheel.gif"; //just a test image
    }

    Tractor.prototype.loading_complete = function()
    {
        this.load_count += 1;
        alert("this.loading_complete, load_count = " + this.load_count + ", gr_max = " + this.gr_max);
        if(this.load_count >= this.gr_max) {this.proceed();}
    };

    function start()
    {
        tractor = new Tractor();
    }
    </script>
</head>

<body onload="start();">
</body>

</html>

When it’s just called from another function of the object (see #1), it works just as I expected. When, however, it’s called from onload event (see #2), the variables become “undefined” or “NaN” or something. What’s happening? What am I doing wrong? How do I make it work?

I don’t remember ever creating my own objects in Javascript before, so I certainly deeply apologize for this “what’s wrong with my code” kind of question. I used this article as a reference, section 1.2, mainly.

Just in case, I put the same code on http://jsfiddle.net/ffJLn/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    bind the context to the callback:

    this.img1.onload = this.loading_complete.bind(this);

    See: http://jsfiddle.net/ffJLn/1/ (same as yours but with this addition)

    Here’s an explanation of how bind works in detail: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

    The basic idea is that it makes this in the bound function equal to whatever you pass as the parameter to bind.

    Another option is to create a closure:

    var self = this;
this.img1.onload = function() { self.loading_complete() };

    Closures are functions that keep references to their context (in fact, all functions in javascript work this way). So here you are creating an anonymous function that keeps a reference to self. So this is another way to maintain context and for loading_complete to have the right this.

    See: http://jsfiddle.net/ffJLn/2/ (same as yours but with the second possibility)

    • 0