jQuery image loading icon

Asked Apr 06 '15 at 15:34

Active Jan 15 '16 at 22:13

Viewed 84 times

I'm trying to make it so when a picture is not yet loaded it will add an icon on top of the image.

Here's what I have done, I can't really say anything else that it is not doing what it is supposed to do so.

$(".loading").show();

$(".img").load(function(){

    $(".loading").hide();
});

Index:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

EDIT:

Apparently i made it work by rewriting my jQuery code:

$(function() {
    $(".loading").show();

    $('.img').on('load', function(){
        $(this).parent().parent().find(".loading").hide();
    });
});

edited Jan 15 '16 at 22:13

marc_s

asked Apr 06 '15 at 15:34

Athax

3

what issue you have faced? – Sudharsan S Apr 06 '15 at 15:36
Try adding the JS code on `$(window).load(..);`. Also try other answers given here http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading. – Shaunak D Apr 06 '15 at 15:37
@ShaunakD Already tried, but I can't seem to fix my problem. – Athax Apr 06 '15 at 15:46
@JqueryKing For some reason it only displays the .loading for a secound. – Athax Apr 06 '15 at 15:55
Won't work properly if there are more than one `class="img"`. WIll fire when any of them load – charlietfl Apr 06 '15 at 16:14
@charlietfl There's more than one class="img" how do i make it so it works on all images who has that class? – Athax Apr 06 '15 at 16:26

0 Answers0