完整图像加载后的javascript执行功能[重复]答案

【问题标题】：javascript executing function after full image load [duplicate]完整图像加载后的javascript执行功能[重复]
【发布时间】：2011-05-05 06:08:13
【问题描述】：

我有以下 javascritp $("#hero_image img").attr('src', src); 行来更改图像。以下几行然后根据我通过$("#hero_image img").width(); 调用的图像新宽度执行它们所做的任何事情。

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

【问题讨论】：

【解决方案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);

【讨论】：

【解决方案2】：

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

【讨论】：