Question

Maybe I should have asked this way earlier…

I have a DIV that loads all items from a sql table. Then I have some checkboxes that will be used to filter by color, so if a user picks BLUE the DIV will be reloaded passing BLUE as the color and showing only BLUE items.

Once the user clicks, I would like to show a “loading” .gif during the time elapsed while loading the BLUE items. Maybe it’s super short or maybe it takes 3 seconds or so…

My options are:

• Having another DIV inside my main DIV that contains the .gif and is CSS non displayed. Then with a JQUERY I would have to display it and then hide it… If this option is good, what kind of JQUERY could i use?

• Using a JQUERY to .load the Loading DIV before I load the results after filtering

Thanks!

Answer 1

The easiest approach is to have the div in the page, usually near the bottom of the page, hidden with css:

<div id="loading">
    <img src="img/loading.gif" alt="Loading." />
</div>

css:

#loading {
    display:none;
    /* some more code to position the div where you want */
}

js:

$("#loading").toggle(); // or .show() / .hide()

See fiddle: http://jsfiddle.net/Gwmah/