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

Question

Using jQuery, is there a way to detect when one particular image is done loading? I've seen this plugin: http://desandro.github.io/imagesloaded/ but this should be a simple solution. I really don't want to download another plugin.

User clicks on this element:

<input type="file" />

jQuery function places the image into this element:

<img src="" />

I want to determine when the image has finished loading. Can this be done? Thanks.

Answer 1

I made a jsfiddle with a really rough working example of .load() working 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);
    });
});

On click, the image is placed in the div and then after it finishes loading, the div fades in. So it successfully detects when the image has finished loading. I've used this technique a hundred times.

EDIT: cleaned it up a little bit