完整图像加载后javascript执行功能

Question

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

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

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);

Answer 2

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