JQuery - wait for the image to load before proceeding
In the application I am currently working on, I have 2 HTML5 canvases that I am using. One (TempCanvas) is for temporarily drawing charts, and the other (MainCanvas) is for dragging charts onto it for presentation. I have an image that I am trying to draw on the TempCanvas and then when it is loaded I would like to draw the TempCanvas on the MainCanvas.
The problem I'm running into is the TempCanvas being drawn on the MainCanvas before the image is drawn on the TempCanvas. Is there a way to wait until the image is loaded before continuing in code?
My main function:
1 // Draw the chart onto the TempCanvas
2 $(this).DrawChart(TempCanvas, OtherParams);
3 // Draw the TempCanvas onto the MainCanvas
4 MainCanvasContext.drawImage(TempCanvas.get(0), PositionX, PositionY);
DrawChart function:
1 $.fn.DrawChart = function(TempCanvas, OtherParams)
2 {
3 var image = new Image();
4 image.onload = function()
5 {
6 TempCanvasContext.drawImage(image, PositionX, PositionY);
7 // Draw some other stuff on the TempCanvas.
8 }
9 image.src = FilePath;
10 }
Basically, I'm looking for a way to wait for DrawChart Line 6 to finish executing before main line 4 starts executing. Any pointers in the right direction would be greatly appreciated.
source to share
Use a callback inside your object otherParams
like this:
// Draw the chart onto the TempCanvas
$(this).DrawChart(TempCanvas, { ...
callback : function(){
// THIS CODE WILL RUN ONLY AFTER IMAGE HAS LOADED
// Draw the TempCanvas onto the MainCanvas
MainCanvasContext.drawImage(TempCanvas.get(0), PositionX, PositionY);
}
});
DrawChart function:
$.fn.DrawChart = function(TempCanvas, OtherParams)
{
var image = new Image();
image.onload = function()
{
TempCanvasContext.drawImage(image, PositionX, PositionY);
// Draw some other stuff on the TempCanvas.
otherParams.callback(); // NOW WE CAN CONTINUE RUNNING THE CODE
}
image.src = FilePath;
}
Generally speaking, it is good practice to create callbacks and events when developing a jQuery plugin. They are very useful and the whole library is structured this way.
Note that you can do something like this:
image.onload = otherParams.callback;
And pass the whole handler as a parameter. This is your decision and should fit your needs. In your case, it's probably best to leave it as it is.
source to share
Since loading the image is Async, you will also have to paint the MainCanvasContext using async. One way to do this is with jQuery.Deffered
$.fn.DrawChart = function(TempCanvas, OtherParams)
{
var deferred = new $.Deferred();
var image = new Image();
image.onload = function()
{
TempCanvasContext.drawImage(image, PositionX, PositionY);
// Draw some other stuff on the TempCanvas.
deferred.resolve("I'm done");
}
image.src = FilePath;
return deferred.promise();
}
$(this).DrawChart(TempCanvas, OtherParams).done(function(){
MainCanvasContext.drawImage(TempCanvas.get(0), PositionX, PositionY);
});
source to share