Javascript - 检测何时加载图像

时间:2014-02-23 21:22:07

标签: javascript while-loop undefined

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

3 个答案:

答案 0 :(得分:3)

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

示例:

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

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

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

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