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