Question

I have the following loading image:

<img id="loading" src="loading.gif" />

To show/hide it during an AJAX call, I have several solutions. For example, I can hide it by adding a class which corresponds to a CSS style:

$('#loading').addClass('hidden');

.hidden { display: none; }

Alternatively, I can use jQuery .show() and .hide(). In this particular example, the latter approach is less verbose.

What scenarios benefit from adding CSS ‘on the fly’? I’ve been reading into ‘Unobtrusive JavaScript’ which recommends injecting all JS into the DOM using jQuery at $(document).ready().

Is there a best practices approach which cleanly separates CSS and jQuery in a similar manner?

Answer 1

If you want to set the initial state from the server side then it would be cleaner to use classes, as that will avoid the necessary client-side initialization (with possible flashing of the content).

You also usually use class selectors with jquery, so it is always easier to play with classes (for me at least), than trying to figure if a property has been changed in the css of an element.

In the end it boils down to what you feel more comfortable working with..