jQuery: check if an image has finished loading

Question

Possible Duplicate:
Browser-independent way to detect when image has been loaded

How can i check if an image has been completely downloaded by the client, so that i can use it in a format like :

<script type="text/javascript">
function doSomething(){
//doing something already
    if(image has finished loading) {
        alert("The image has been downloaded");
    }
    else {
        //do something else
    }
}
</script>

Thank you

check this link might help you: http://stackoverflow.com/questions/821516/browser-independent-way-to-detect-when-image-has-been-loaded — Rahul, Nov 03 '12 at 09:03

score 2 · Accepted Answer · answered Nov 03 '12 at 09:02

2

You can use load:

$img.load(function() {
  // image is loaded
});

If you have problems, load the code on window.load instead of document.ready.

answered Nov 03 '12 at 09:02

elclanrs

92,861
21
134
171

1

I don't want to execute a function WHEN the has been loaded. I just want to check IF the image has been loaded – Peeyush Kushwaha Nov 03 '12 at 09:04
Not completly accurate, see broken image http://jsfiddle.net/WSvTa/ – A. Wolff Nov 03 '12 at 09:35
@roasted: If the image is in cache it won't work you need to test if it's already cached. Don't use `console` it wont work on fiddle, use `alert` in this case. Also `img` are self-closing elements, you have 4 images in the code. Also, broken image is still an image so if it's loaded it should alert the message, maybe you want to use `error`. Working -> http://jsfiddle.net/elclanrs/WSvTa/1/ – elclanrs Nov 03 '12 at 09:45
You are correct for self img closing tag, my mistake. Concerning console not working, this is just for firefox, other browsers seem to handle it correctly. In the jsFiddle you have posted, still not working in Chrome. The expected result was cnt==2, not 1. – A. Wolff Nov 03 '12 at 09:50

score 1 · Answer 2 · answered Nov 03 '12 at 09:05

Try something like that -:

<script type ="text/javascript">
    var imageLoaded = false;

    $(document).ready(function(){

        $("img").load(function(){
            imageLoaded = true;
        });
    });


    function doSomething(){
        //doing something already
        if(imageLoaded) {
           alert("The image has been downloaded");
        } 
        else {
           //do something else
        }
}

</script>

sohel khalifa · Answer 3 · 2012-11-03T09:14:22.413

0

<span id="result"></span>
</p>

<script type="text/javascript">

    $('#image1')
    .load(function(){
        $('#result').text('Image is loaded!');  
    })
    .error(function(){
        $('#result').text('Image is not loaded!');
    });

</script>

edited Nov 03 '12 at 09:14

answered Nov 03 '12 at 09:04

sohel khalifa

5,602
3
34
46

score 0 · Answer 4 · answered Nov 03 '12 at 09:25

All theses solutions using only load function callback are not completely accurate as sometimes load is not fired for already cached image or broken ones. There was many attempts to make simplest as possible to detect this behaviour and as i can tell you, the best is to use the very lighted plugin imagesloaded by Desandro.

You can see it here: https://github.com/desandro/imagesloaded/blob/master/jquery.imagesloaded.js

jQuery: check if an image has finished loading

4 Answers4