jQuery - 在继续之前等待图像加载

Question

在我当前正在开发的应用程序中，我正在使用 2 个 HTML5 Canvas。一个(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 执行之前完成执行。任何正确方向的指针将不胜感激。

Answer 1

在 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;

并将整个处理程序作为参数传递。这是您的决定，并且应该适合您的需求。在你的情况下，最好保持原样。