document ready after dom manipulation
dom-manipulation, javascript, mobile, ready
Solution
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
Problem
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`?