document ready after dom manipulation

Question

I'm doing an application with Phonegap and I'm using a self-built slide transition to change the pages. It works like this:

Every page is a div with 100% height and width, so if I change the Page, I set the next div right to the currently active and slide both to the left side.

Now to the Problem: the sliding works fine, but it's executed before the content of the right div is completely loaded. So the right div slides in empty, and only after a few hundred miliseconds the content will appear.

I tried it with document.ready, but as I've read this event is only executed the first time the DOM is loaded.

Does anybody know how I can wait for the DOM to be completely rendered again after I've manipulated the DOM with Javascript?

Answer 1

In your case, you can pick one element in the content of the next div and keep checking it with $(...).length. If the value is > 0, the DOM is loaded and you can change the page.

You may want to try this function:

Function.prototype.deferUntil = function(condition, timeLimit) {
    var ret = condition();

    if (ret) {
        this(ret);
        return null;
    }

    var self = this, interval = null, time = ( + new Date());
    interval = setInterval(function() {
        ret = condition();
        if (!ret) {
            if (timeLimit && (new Date() - time) >= timeLimit) {
                // Nothing
            } else {
                return;
            }
        }
        interval && clearInterval(interval);
        self(ret);
    }, 20);

    return interval;
};

Usage:

(function() {
    console.log('Next page loaded');
}).deferUntil(function() {
    return $('#nextDiv').length > 0;
}, 3000);

The above example will check the div that has id="nextDiv" in every 20ms (not longer than 3 seconds). When the div is loaded, it will show 'Next page loaded' in the console.

You can try on this fiddle