javascript - 文档在 dom 操作后准备就绪

Question

我正在用 Phonegap 做一个应用程序，我正在使用一个自建的幻灯片切换来更改页面。 它是这样工作的:

每个页面都是一个高度和宽度为 100% 的 div，因此如果我更改页面，我会将下一个 div 设置为当前事件的右侧并将两者都滑动到左侧。

现在问题来了:滑动工作正常，但它是在右侧 div 的内容完全加载之前执行的。所以右边的 div 滑入空白，只有几百毫秒后内容才会出现。

我用 document.ready 试过了，但据我所知，这个事件只在第一次加载 DOM 时执行。

在我用 Javascript 操作了 DOM 之后，有人知道如何等待 DOM 再次完全呈现吗？

Answer 1

在您的情况下，您可以在下一个 div 的内容中选择一个元素，并使用 $(...).length 继续检查它。如果该值 > 0，则加载 DOM，您可以更改页面。

你可能想试试这个功能:

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;
};

用法:

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

上面的例子会每 20 毫秒(不超过 3 秒)检查一次有 id="nextDiv" 的 div。加载 div 后，它将在控制台中显示“下一页已加载”。

你可以试试这个 fiddle