How to load a page with gravatar and jquery?

Question

I am using gravatar to load avatars for each user that posts a story on a page. I also am using jquery to round the corners of some span elements on the page. Unfortunately, it looks like grabbing the avatars from gravatar occurs before the jquery effects are applied (Without the gravatar code the elements are immediately rounded) so the elements change in appearance an instant after being visible on the site. Is there any way to work around this? (I am using asp.net mvc)

Answer 1

It sounds as though your gravatar loading script is executing before the appearance-modifying jQuery calls. Is there any way you can manually call the gravatar load? If so, you can use jQuery's document.ready to call your cosmetic changes first, then call the gravatar load. This way, you won't be waiting for the gravatars to finish before the "more important" UI changes get run.

Answer 2

I suppose you're loading gravatars using urls, not ajax etc. document.ready() will execute when the DOM is loaded, not necessarily when all (gravatar) images are loaded. You might try to use window.onload event in your case.