Jquery loading image while image is loading

Question

I made the following script to show a loader while a image is loading, my only question is how to implant this on multiple image's ?

working script: http://jsfiddle.net/4QhjD/

the jQuery part

$(window).ready(function(){
    $("#image").load(function(){
        $("#waiter").fadeOut(function(){
            $("#image").fadeIn();
        });
    });
});

the html

     <div id="content">
       <div id="waiter"><img src="http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif"></div>
       <img src="http://responsiveslides.com/1.jpg?PREVENT_CACHE=6200" id="image"/>
    </div>

@imjared Why? In this context it's being used in the same way the .click() or .mouseup() function might be used. Read the manual, please — Bojangles
– Bojangles, Commented Oct 20, 2013 at 14:15
@Bojangles whoa, learn something new every day. Didn't know that. Manual = read. Thanks for heads up — imjared
– imjared, Commented Oct 20, 2013 at 16:48

Irvin Dominin · Accepted Answer · 2013-10-20 14:19:19Z

1

You can use class instead of id's like.

HTML:

<div class="content">
    <div class="waiter">
        <img src="http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif">
    </div>
    <img src="http://responsiveslides.com/1.jpg?PREVENT_CACHE=6200" class="image" />
</div>
<div class="content">
    <div class="waiter">
        <img src="http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif">
    </div>
    <img src="http://responsiveslides.com/2.jpg?PREVENT_CACHE=6200" class="image" />
</div>

Code:

$(window).ready(function(){
    $(".image").load(function(){
        $(this).siblings(".waiter").fadeOut(function(){
            $(this).siblings(".image").fadeIn();
        });
    });
});

Demo: http://jsfiddle.net/IrvinDominin/kk7ad/

answered Oct 20, 2013 at 14:19

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

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

Comments

David Strada · Accepted Answer · 2013-10-20 14:14:54Z

0

You are using an id #image meaning you can only use your script 1 time ( the same id can oly be use 1 per page ), you should try to use a class="image", then you can doit like so.

$('.image').each(function (){ //Your code goes here. })

answered Oct 20, 2013 at 14:14

David Strada

13011 bronze badges

Collectives™ on Stack Overflow

Jquery loading image while image is loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related