Running jQuery after all other JS has executed

Question

In the past, I have used $(window).onload to run a block of code after other scripts have loaded. In this case I don't have the ability to change the loading order of the JS files and the code that I am concerned with needs to manipulate DOM nodes that are dynamically inserted by another JS file that is loaded further down the page. Both scripts are located near the bottom of the document. Does anyone have any suggestions for this scenario?

Answer 1

If you know what elements to expect, you can use setInterval to poll the DOM to see when they've been inserted. For example, this is how you could poll for an element with ID foo:

$(window).load(function ()
{
    var i = setInterval(function ()
    {
        if ($('#foo').length)
        {
            clearInterval(i);
            // safe to execute your code here
        }
    }, 100);
});

Answer 2

Even though you cannot change the load order, can you change how it is loaded?

One thing I have used in the past when I wanted to load some javascript and execute some code after I was sure that it had finished loading is jquery's $.getScript:

$.getScript('javascripttoload.js', function() {
        //do the DOM manipulation you were talking about...
});

http://api.jquery.com/jQuery.getScript/

Answer 3

If you need to attach an event handler to future DOM nodes, you could use jQuery .live(), otherwise, you can use livequery plugin.

example:

$(".nodes").livequery(function () {
    // do something with the nodes
}

which will call the supplied anonymous function for all current and future nodes with the class .nodes

Answer 4

The problem was trying to declare a variable to store the jQuery object before the object was on the page. Moving those declarations inside of a code block that was only executed after a click event which was only bound after $(window).load solved the problem.

Thanks all for the tips, though!

Answer 5

If the other script executes entirely within a load event, you can add a handler to the same event and put your code in a setTimeout call (with a delay of 1), which will force your code to execute during the next break.