Ajax request gif

Question

I have seen that an animated loading gif loads when a an ajax request is being processed. I was wondering how this was done.

For example, there are a lot of images that are loaded from css file. Can I make a loading gif appear until these images are loaded.

Answer 1

Do you mean smth. like this: http://api.jquery.com/ajaxStart/

or this: How to show loading spinner in jQuery?

Answer 2

I dont know if you are using ASP.NET MVC? If that is the case you can use an @Ajax.ActionLink and put your loading gif in an img tag specifying the id in your actionlink's AjaxOptions in the LoadingElementId. It would look somehow like this

@Ajax.ActionLink("MyAction", "MyController", new AjaxOptions(){LoadingElementId = "MyGif"})

It will then hide the img gif until the actionlink is triggered. Sometimes you will need to hide it yourself using css, but as far as I remember that is not the case when you are just using an img tag

Answer 3

You don't really mean Ajax. The images declared in css are loaded by the browser normally.

You need the load event, try this:

1 - Create an element with id yourDivIdWithLoadingElement in your html page which will be shown until all images has been loaded

<div id="yourDivIdWithLoadingElement:>Loading content...</div>

2 - Add this script in your header:

$(window).load(function () {
    $('#yourDivIdWithLoadingElement').hide();
});