document.ready() doesn't work but setinterval() does

Question

I don't really know why. I have a page with lots of things that load external things.

Eg I have an slider that loads images with a script at the bottom of the page... I have another script tag at the bottom of it with some animations and stuff of kindness being applied to that slider.

The problem is that I tried to use a document.ready() , but it doesn't work... So I thought it was because the document is ready but the slider isn't, or something like that.

So, I put the same things I was executing in the document.ready() into a setInterval() refreshing every second... It worked, but the problem is that, even when I get what I want with that script, it keep refreshing!!! And I don't want it, what I want is it to execute only once, but only when the page is really ready (When the refreshing animation in the tab of the browser stops) How can I do that? Some idea?

Answer 1

You are confusing jquery's ready method with native onload.

Either use:

window.onload = function(){
  // do something here. Everything including resources are loaded
}

or:

$(document).ready(function(){
  // do something here. The DOM is loaded
});

Answer 2

Try to use window.onload = yourInitialisesFunction; the onload event fireds when your DOM is completly loaded.

(Sorry it was window.onload = yourFunction), JQueries ready() function fires when the DOM is parsed but not if all images etc is loaded.