Javascript dom操作后文档准备就绪

我正在用

Phonegap

做一个应用程序，我正在使用一个自建的幻灯片转换来更改页面。 它的工作原理如下：

每个页面都是一个高度和宽度均为100%的

div

，因此如果我更改页面，我会将下一个

div

向右设置为当前活动页面，并将两个页面滑动到左侧

现在来看问题：滑动工作正常，但它是在右

div

的内容完全加载之前执行的。因此，右侧的

div

将空转，仅在几百毫秒后内容才会出现

我用

document.ready

尝试了它，但正如我所读到的，这个事件只在第一次加载

DOM

时执行

---

有人知道在我使用

Javascript

操作

DOM

之后，如何等待

DOM

再次完全呈现吗？

您可以使用jQuery ajax加载内容，并在成功后使用幻灯片运行函数

$("#page1").load('page2.html', function() {
    //do your custom animation here
});

虽然我不完全确定你是如何加载内容的。它是静态的（已经存在但只是不可见？）还是用ajax加载的

---

编辑：您只需在几毫秒内执行一个小的.delay（）或setTimeout，然后设置滑动动画。

在您的情况下，您可以在下一个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时，它将在控制台中显示“下一页已加载”

您可以试试这个
有一个DOMNodeInserted事件，它应该像document.ready一样工作，但用于单个DOM节点。但它已被弃用，并存在许多问题。StackOverflow用户发现了一个很好的替代方案，它在所有移动浏览器中都能很好地工作：
我在使一个网站响应性方面也遇到了类似的问题。我使用的是
window.onload
，它在初始化massy.js之前等待所有元素完成加载。我还将
窗口.onload
放在
内部.onchange
函数中，每次调整视口大小时它都会启动

我相信应用类似的原则会解决你的问题。
试试看

$(window).bind('load',function(){
//code
});

也许你可以在你的div上设置一个事件

myDiv.onafterupdate = myHandler;

function myHandler() {
   // Do here what you want to do with the updated Div.
}

这对您有帮助吗？
这里有一个函数，它将在所有与jquery选择器匹配的图像加载完毕后触发回调


//css
输入{宽度：420px；}
//html






//javascript
//在匹配图像完成加载后调用函数
函数imagesLoadedEvent（选择器、回调）{
var This=此；
this.images=$（选择器）；
this.nrImagesToLoad=this.images.length；
此.nrImagesLoaded=0；
//检查是否已缓存和加载图像
$.each（这是图像，函数（键，img）{
如果（图像完成）{
这个.nrImagesLoaded++；
}
if（This.nrImagesToLoad==This.nrImagesLoaded）{
回调（This.images）；
}
});
this.images.load（函数（evt）{
这个.nrImagesLoaded++；
if（This.nrImagesToLoad==This.nrImagesLoaded）{
回调（This.images）；
}
});
}
$（“#btn”）。单击（函数（）{
var c=$（“#容器”），evt；
c、 空（）；
c、 附加（“”）；
c、 附加（“”）；
c、 附加（“”）；
evt=新的图像标记（“img”，allimagesloadevent）；
});
功能ALIMAGESLOADED（imgs）{
//在加载所有图像时调用此函数
$（“#消息”）.text（“加载的所有图像”）；
setTimeout（function（）{$（“#message”）.text（“”；}，2000）；
}
在jquery中，您可以在DOM操作代码之后使用$（）

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$（）调用一个函数，该函数要么注册DOM就绪回调（如果向其传递函数），要么从DOM返回元素（如果向其传递选择器字符串或元素）

您可以在这里找到更多信息


谢谢你的回答。内容在移动数据库中，所以我从那里取出，插入div，然后滑入。设置超时的问题是，大页面需要大约600毫秒，而小页面需要大约50毫秒。我不想因为大页面需要这个时间，就等600毫秒的小页面。。内容有时是静态的，有时是从javascript变量中加载的。完成时是否有来自数据库查询的回调，您可以等待？如果您使用的是ajax，则可以使用$（document）.on（'ajaxComplete'，function（）{/*Do animation*/}）；在开始动画之前，您需要循环浏览新页面上的图像，并确保它们都具有real.height属性（意味着它们已完成加载）。
$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});