jQuery检测何时加载一个图像-无插件

Question

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

用户单击此元素：

<input type="file" />

jQuery函数将图像放入以下元素：

<img src="" />

我想确定图像何时完成加载。 能做到吗？ 谢谢。

Answer 1

我做了一个用的jsfiddle的.load一个非常粗略的工作示例（）工作在这里 。

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淡入。因此，它可以成功检测图像何时完成加载。 我已经使用这种技术一百次了。

编辑：清理了一点