The first thing we're going to do is
gather all our add_pipe calls into a function:
function add_all_my_pipes() {
add_pipe(500, 100, 140);
add_pipe(800, 50, 140);
add_pipe(1000, 250, 140);
}
The next step involves the code where we create the pipe_piece image, and load its url.
Images have a special "onload" event that automatically gets called when the image has finished loading. We simply arrange for add_all_my_pipes to be called after the image has loaded.
The delay may only be a tenth of a second, and won't be noticeable by any human, but it's essential that we don't start using pipe_piece before it has its dimensions.
var pipe_piece = new Image();
pipe_piece.onload = add_all_my_pipes;
pipe_piece.src = "http://s2js.com/img/etc/flappypipe.png" ;
Let's take it for a run and see how it looks.