Question

I have an html element with class i.e article:

<article> Content </article>

For my jQuery script it means, that it should add some specific classes prepared before:

$('article').addClass('rounded box-shadow gradient-bright');

I have some article and other similiar boxes around whole my web page, so if I want to change something I have to do it only in one place – javascript script.

But the question is, how I should use jQuery to get the best results? I don’t want situation that user have to see changes on loaded page (i.e slow transfer so at the beginning is box, then he see it’s rounded box with shadow… he should definitely see all changes at once).

So…

$(window).ready( /* add class */ ) ...

Or…

$(document).ready( /* add class */ ) ...

Or…

Without ready function , just /* add class */

Or maybe there is any other solution?

Edit Change <div class="article"> into <article> pro forma 😉 But it’s only example…

Answer 1

You should be using the document-way. This means the codes will get executed at the earliest possible moment after the DOM has been built.

To expand on this: window ready also waits for external source to be loaded (images, etc).