jQuery (document).ready not waiting for DOM to be ready

Question

I've got a very subtle animation in the header. When first loading the page, or refreshing with cmd+shift+r (mac) to clear the cache, jQuery really doesn't seem to wait for the DOM to be ready. It starts the animation before all the normal html/css has popped up.

Am I just misunderstanding exactly what (document).ready actually does?

Answer 1

DOMContentLoaded fires when the DOM is ready, but that doesn't necessarily mean all of the CSS and Images are done loading. If you want that, a better option would be $(window).on('load',function(){...});