body - onload div jquery

jQuery-Espere a que la imagen se cargue antes de continuar

Question

En la aplicación en la que estoy trabajando actualmente, tengo 2 Canvases HTML5 que estoy usando. Uno (TempCanvas) es para dibujar gráficos temporalmente y el otro (MainCanvas) es para transferir los gráficos a él para su presentación. Tengo una imagen que estoy tratando de dibujar en TempCanvas, luego, cuando esté cargada, me gustaría dibujar TempCanvas en MainCanvas.

El problema con el que me estoy encontrando es que TempCanvas se está dibujando en MainCanvas antes de que la imagen se dibuje en TempCanvas. ¿Hay alguna manera de esperar hasta que la imagen se cargue antes de continuar en el código?

Mi función principal:

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

La función 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 }

Básicamente, estoy buscando una manera de esperar que DrawChart Line 6 termine de ejecutarse antes de que se ejecute Main Line 4. Cualquier indicador en la dirección correcta sería muy apreciado.

Answer 1

Como la carga de la imagen es Async, también tendrá que dibujar el MainCanvasContext también de forma asíncrona. Una forma de lograr esto es con 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);
});

Answer 2

Use una devolución de llamada dentro de su otro otherParams manera:

  // 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);
      }
  });

La función 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;
 }

En general, es una buena práctica crear funciones y eventos de devolución de llamada cuando se diseña un plugin jQuery. Son muy útiles y toda la biblioteca está construida de esta manera.

Tenga en cuenta que puede hacer algo como esto:

image.onload = otherParams.callback;

Y pase todo el controlador como un parámetro. Es su decisión y debe ajustarse a sus necesidades. En tu caso, probablemente sea mejor dejarlo como está.