Javascript - 检测图像何时加载答案

【问题标题】：Javascript - detect when image loadedJavascript - 检测图像何时加载
【发布时间】：2014-03-25 08:17:24
【问题描述】：

我有一个函数，除其他外，它从元素中获取data 属性并将其用于一些计算。问题是该属性仅在元素的背景图像加载后才分配。

由于该函数在加载背景图像之前触发，因此我要查找的变量是未定义的（因此会导致其他问题）。我想我会通过在变量未定义时使用while 循环来解决这个问题。如果该变量未定义，请继续检查它直到未定义：

while ($(".element").data("ui-color") == "undefined"){
    var color = "" // keep it blank until the attribute exists
}

然后在循环不再为真之后，给变量赋值：

var color = $(".element").data("ui-color");

问题在于它似乎忽略了 while 循环，仍然导致未定义的变量。

我应该为 while 循环使用其他条件（或完全使用其他方法）吗？

【问题讨论】：

如果ui-color 是从异步任务中设置的，例如图像的load 事件，那么这样的循环实际上会阻止它完成。 JavaScript（主要）是单线程的，并且该线程将太忙于循环而无法处理事件。您需要将要执行的代码绑定到同一个事件，或者将设置 ui-color trigger 的代码设置为一个新事件，以便它在此期间处于空闲状态。

【解决方案1】：

编辑：这实际上并不能解决问题，而是识别代码中的错误

进行此更改以使您的代码正常工作

typeof $(".element").data("ui-color") == "undefined"

typeof 运算符将评估左侧的字符串文字“未定义”，这看起来就像您打算做的那样。

【讨论】：

【解决方案2】：

尝试以不同的方式查看，在背景图像上使用加载事件。喜欢

$("#background").on("load",function() { console.log("blah") }

【讨论】：

【解决方案3】：

您应该使用 JavaScript 的 Image.onload 事件，并在图像加载后执行循环。

例子：

var img = new Image;
img.onload = function() {
  // your calculations here
}
img.src = 'path/to/file';

一旦图像完全下载并由浏览器显示，onload 事件将触发。

【讨论】：