check image has been loaded using jquery

Question

Problem- At run time I am changing/replacing src attribute of some images using jquery. These images are by default hidden. I want to display these images when these images are download and ready to display because it is also possible that some images can not be downloaded.

         <img id="pic_1" width="153" height="160" border="0" 
                onmouseout="this.style.border='2px solid #FFFFFF';"
                   onmouseover="this.style.border='2px solid #4585E7';" 
                                       style="visibility: hidden;" 
                                        src="**to be replaced at run time**"">

Please let me know any solution how can i achieve this.

You can get more ideas about this here: http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript — Mike Drakoulelis, Apr 25 '13 at 10:37

musefan · Accepted Answer · 2013-04-25T10:45:20.097

2

I believe you can use the Load event for this.

Something like:

$('#myImage').load(function() {
  //called when image is loaded
});

Here is a working example

Here is an example with delayed loading

edited Apr 25 '13 at 10:45

answered Apr 25 '13 at 10:33

musefan

47,875
21
135
185

score 1 · Answer 2 · answered Apr 25 '13 at 10:35

1

$('#imgId').load(function(){
alert('Image Loaded')
});

answered Apr 25 '13 at 10:35

Raab

34,778
4
50
65

score 1 · Answer 3 · edited May 23 '17 at 11:57

1

In addition to musefan's answer, if you need it to work with cached images as well, you'll need something more than load()

Check https://github.com/desandro/imagesloaded. It's a jQuery plugin that triggers a callback when images have been loaded. It works for cached images as well.

Check jQuery event for images loaded for more info.

edited May 23 '17 at 11:57

Community

1
1

answered Apr 25 '13 at 10:38

Osiris

4,195
2
22
52

score 0 · Answer 4 · answered Apr 25 '13 at 10:44

This code would hook to every picture you got on your site with the class "preload".

$(function(){
    //Hide all pictures first (You could here work on some loading animations if you want)
    $("img.preload").css("display", "none");

    //When the image is loaded, show it again
    $("img.preload").load(function(){
        $(this).css("display", "block");
    });
});

check image has been loaded using jquery

4 Answers4