jQuery检测当一个图像加载 - 没有插件

Question

使用jQuery，有没有办法检测何时加载完成一个特定的图像？我见过这个插件：http://desandro.github.io/imagesloaded/但这应该是一个简单的解决方案。我真的不想下载另一个插件。

用户点击此元素上：

<input type="file" /> 

jQuery函数图像放到这个元素：

<img src="" /> 

我要确定当图像加载完毕。这可以做到吗？谢谢。

Answer 1

我做了一个jsfiddle，真的很粗糙工作示例.load（）工作here。

HTML

<figure class="button">button</figure> 
<div id="imgload"></div> 

CSS

figure { 
    width: 50px; 
    height: 20px; 
    line-height: 20px; 
    background: #ccc; 
    text-align: center; 
} 

#imgload {display:none;} 

jQuery的

$('.button').on('click', function(){ 
    $('#imgload').html('<img src="http://placekitten.com/700/400"/>'); 

    $('#imgload img').load(function(){ 
     $('#imgload').fadeIn(400); 
    }); 
}); 

点击后，图像被放置在div然后在加载完成后，div淡入。因此它成功检测到图像加载完成的时间。我已经使用过这种技术了一百次。

编辑：把它清理一下