Javascript - 检测何时加载图像

Question

我有一个函数，除其他外，从元素中获取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循环（或其他完整的方法）？

Answer 1

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

示例：

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

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

Answer 2

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

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

Answer 3

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

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

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

typeof运算符会将左侧评估为字符串文字'undefined'，这就是您打算做的事情。