Jquery loading hide when image is loaded [duplicate]

Question

I have this jquery that catch link url (this link is an image) and simple show this image. My problem is the loading. I want to show LOADING and hide it when the image is completely loaded. but I can't because my new image has no class and I don't not how to check if it is done.

How can I show and hide this loading properly?

js

$(function() {
    $(".p").click(function(e){
        e.preventDefault();
        var element = $(this);
        var I = element.attr("href");

        $("#loading").show(); //SHOW LOADING

        $("#imgfull").empty();
        var img = $("<img/>").attr("src", I); // add new image
        $("#imgfull").append(img); // add new image

        $('#???').load(function(){
             //$("#loading").hide();    //hide loading?????
        })

    });

});

html

<a href="http://ilikewall.com/wp-content/uploads/2015/04/3d_wallpapers_hd.jpg" class="p">click to load</a>

<div id="loading">LOADING</div>
<div id="imgfull"></div>

http://jsfiddle.net/4g0n8asc/

thank you

You should not use hide, makes things slow ...

mahatmanich
– mahatmanich

2015-08-21 07:56:20 +00:00
Commented Aug 21, 2015 at 7:56 — mahatmanich
– mahatmanich, Commented Aug 21, 2015 at 7:56
what is the best one to use?

renata costa
– renata costa

2015-08-21 08:00:11 +00:00
Commented Aug 21, 2015 at 8:00 — renata costa
– renata costa, Commented Aug 21, 2015 at 8:00

Andrea Ligios · Accepted Answer · 2015-09-21 07:58:30Z

4

You can do something like this:

img.load(function(){
    $("#loading").hide();
})

Example :: http://jsfiddle.net/Frogmouth/4g0n8asc/2/

NOTE:

.load() method on <img /> sometimes has some problem, this little plugin fix all (or a lot of) these issues: imagesloaded

edited Sep 21, 2015 at 7:58

Andrea Ligios

50.4k29 gold badges127 silver badges256 bronze badges

answered Aug 21, 2015 at 7:54

Frogmouth

1,8161 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frogmouth Over a year ago

;) take a look to the note.

Collectives™ on Stack Overflow

Jquery loading hide when image is loaded [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related