title: How do I make an image load synchronously?
body: <p>I want to create an object that has an image property, but I want the contstructor to finish running only once the image is loaded. Or to describe this with code:</p>
  
  <pre><code>GraphicObject = Class.extend({
  
      //This is the constructor
      init: function(){
            this.graphic = new Image();
            this.graphic.src = 'path/to/file.png';
  
            while(true)
            {
                this.graphic.onload = function(){break;};
                //I know this won't work since the 'break' is on a different context
                //but you got what I try to do.
            }
       }
  
  
  })
  </code></pre>
  
  <p>For those who are unfamiliar with the Class notation I'm using in my script, it's based on <a href="http://ejohn.org/blog/simple-javascript-inheritance/">this</a> </p>
  
  <p>Any ideas?</p>