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

【问题标题】：Delay JS code until CSS background image loaded延迟 JS 代码，直到加载 CSS 背景图像
【发布时间】：2016-03-18 03:51:55
【问题描述】：

我有一个与 HTML 画布一起使用的 JS 脚本：

在画布元素上绘制背景图像，然后
在画布上绘制线条/其他信息。（用于家具的尺寸测量）。

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

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。

结果可以是

成功
失败

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

【问题讨论】：

您可以使用图像预加载器来确保在您尝试使用图像之前加载两个图像。这是example。

标签： javascript jquery css canvas

【解决方案1】：

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

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

【讨论】：