Show loading image without ajax

Question

<img id="Img1" class="photoBox" src="Images/DisplayImageById.ashx?number=1&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img2" class="photoBox" src="Images/DisplayImageById.ashx?number=2&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img3" class="photoBox" src="Images/DisplayImageById.ashx?number=3&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img4" class="photoBox" src="Images/DisplayImageById.ashx?number=4&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img5" class="photoBox" src="Images/DisplayImageById.ashx?number=5&userName=<%=Page.User.Identity.Name %>"/>

I have been looking for a way to show a spinning icon until the images load without using ajax? I am researching how to load images using ajax but it wasn't going to well so I started looking for a way to do this without ajax. Is that possible?

Thank you for any help.

Malitta N · Accepted Answer · 2012-03-07 04:27:40Z

1

Check this. This is done using jQuery's load event, which tells when a specific element is being loaded, in your case, img

http://jsfiddle.net/blackpla9ue/uJhCt/1/

$(function(){
  $('div img').each(function(){
    var thisImage = $(this);
    thisImage.hide(0)
             .load(function(){
                $(this).show();
             });
});

Note that this would not work if you put your code inside $(document).ready(function(){ ...});

answered Mar 7, 2012 at 4:27

Malitta N

3,42325 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Show loading image without ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related