JavaScript在完整加载图像后执行函数

Question

我有以下的javascript代码行 $("#hero_image img").attr('src', src); 来更改图像。然后，根据图像的新宽度，通过$("#hero_image img").width();执行操作。

但是，如何确保在获取宽度之前该图像已完全加载，否则会返回旧的宽度？设置超时时间不够可靠。

- kalpaitch

Answer 1

你可以在 .load() 事件处理程序中获取宽度，该处理程序会在完全加载后触发，如下所示：

$("#hero_image img").load(function() {
  alert($(this).width());
}).attr('src', src);

如果您正在这样做并且要重复使用图像，则可以绑定.load()处理程序一次，或者每次需要不同的行为时使用.one()，以便它不会不断添加onload事件处理程序：

$("#hero_image img").one('load', function() {
  alert($(this).width());
}).attr('src', src);

- Nick Craver

---

为什么要使用 one 而不是 on？ - itsazzad

@SazzadHossainKhan 所以处理程序只执行一次，.one() 有一个非常具体的目的 - 运行然后解绑。 - Nick Craver

Answer 2

$(function(){ // document ready
    $('#hero_image img').bind('load', function(){ // image ready
        // do stuff here
    });
});

- Josiah Ruddell