jQuery - 等待图像加载后再继续
jQuery - Wait for image to load before continuing
在我目前正在处理的应用程序中,我使用了 2 个 HTML5 画布。一个(TempCanvas)用于临时绘制图表,另一个(MainCanvas)用于将图表传输到其上进行展示。我有一张图像,我正试图将其绘制到 TempCanvas 上,然后当它加载时,我想将 TempCanvas 绘制到 MainCanvas 上。
我 运行 遇到的问题是在将图像绘制到 TempCanvas 之前先将 TempCanvas 绘制到 MainCanvas。有没有办法等到图像加载后再继续代码?
我的主要功能:
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函数:
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 }
基本上我正在寻找一种方法来等待 DrawChart Line 6 在 Main Line 4 执行之前完成执行。任何正确方向的指示将不胜感激。
由于图像加载是异步的,因此您也必须以异步方式绘制 MainCanvasContext。完成此操作的一种方法是使用 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);
});
在您的 otherParams
对象中使用回调,如下所示:
// 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函数:
$.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;
}
一般来说,在设计 jQuery 插件时创建回调函数和/或事件是一个很好的做法。它们非常有用,整个库都是这样构建的。
请注意,您可以这样做:
image.onload = otherParams.callback;
并将整个处理程序作为参数传递。这是您的决定,应该符合您的需要。在你的情况下最好保持原样。
在我目前正在处理的应用程序中,我使用了 2 个 HTML5 画布。一个(TempCanvas)用于临时绘制图表,另一个(MainCanvas)用于将图表传输到其上进行展示。我有一张图像,我正试图将其绘制到 TempCanvas 上,然后当它加载时,我想将 TempCanvas 绘制到 MainCanvas 上。
我 运行 遇到的问题是在将图像绘制到 TempCanvas 之前先将 TempCanvas 绘制到 MainCanvas。有没有办法等到图像加载后再继续代码?
我的主要功能:
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函数:
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 }
基本上我正在寻找一种方法来等待 DrawChart Line 6 在 Main Line 4 执行之前完成执行。任何正确方向的指示将不胜感激。
由于图像加载是异步的,因此您也必须以异步方式绘制 MainCanvasContext。完成此操作的一种方法是使用 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);
});
在您的 otherParams
对象中使用回调,如下所示:
// 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函数:
$.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;
}
一般来说,在设计 jQuery 插件时创建回调函数和/或事件是一个很好的做法。它们非常有用,整个库都是这样构建的。
请注意,您可以这样做:
image.onload = otherParams.callback;
并将整个处理程序作为参数传递。这是您的决定,应该符合您的需要。在你的情况下最好保持原样。