延迟JS代码，直到加载CSS背景图像

Question

我有一个可以使用HTML画布的JS脚本：

1. 在canvas元素上绘制背景图像，然后

2. 在画布上绘制线条/其他信息。 （这是用于家具的尺寸测量）。

但是，当将脚本从本地移动到实际站点时，我相信图像的加载时间会丢失脚本。

JSFiddle示例

处理图片加载的代码块：

this.sbCanvasElement = $('#'+CanvasDOMRef);
var can = document.getElementById(CanvasDOMRef);
this.sbCanvas = can.getContext('2d');

this.sbCanvasElement.css("background-image","url('"+this.sbImage+"')");
this.sbCanvasElement.css("background-positon","0px 0px");

脚本的这一部分抓取Canvas元素，并将背景图像设置为先前存储在对象中的URL。

结果可以是

• 成功

  

• 失败

  

我相信我必须在加载图像时中断脚本，但我不确定最好的方法。有什么想法吗？

Answer 1

您可以对图片使用onload事件，但需要使用css() canvas方法更改drawImage()方法。

  var imageObj = new Image();
  var context = this.sbCanvas;
  var coord = { x: 0, y: 0 };
  imageObj.onload = function() {
    context.drawImage(imageObj, coord.x, coord.y);
  };
  imageObj.src = 'your-image-url.jpg';