CODEWITHSUNDEEP
javascriptjquery
sterfry68
sterfry68

Reputation: 1093

jQuery Detect When One Image Has Loaded - Without Plugin

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.

Upvotes: 0

Views: 147

Answers (1)

robbclarke
robbclarke

Reputation: 749

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

Upvotes: 1

Related Questions