在dom操作之后准备文件

Question

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

每页都是一个高度和宽度均为100％的div，所以如果我改变页面，我将下一个div设置为当前活动状态，并将两个滑动到左侧。

现在问题：滑动工作正常，但它是在正确加载div的内容之前执行的。因此，正确的div会在空白处滑动，并且只有在几百毫秒之后内容才会出现。

我用document.ready试了一下，但是我读过这个事件只是第一次加载DOM时执行。

在我用DOM操纵DOM之后，有谁知道我怎么能等待Javascript再次完全渲染？

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

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

你可以尝试这个fiddle

Answer 2

有一个DOMNodeInserted事件应该像document.ready一样工作，但是对于各个DOM节点。但它被弃用并且有很多问题。 StackOverflow用户找到了一个很好的替代品，在所有移动浏览器中运行良好：Alternative to DOMNodeInserted

Answer 3

这是一个函数，一旦匹配jquery选择器的所有图像都完成加载，它将触发回调

Js Fiddle Sample

//css
input {width: 420px;}

//html
<div id="container"></div>
    <input type="text" value="http://goo.gl/31Vs" id="img1">
    <br><input type="text" value="http://wall.alafoto.com/wp-content/uploads/2010/11/Fractal-Art-Wallpapers-09.jpg" id="img2">
    <br><input type="text" value="http://pepinemom.p.e.pic.centerblog.net/ssg8hv4s.jpg" id="img3">
    <br><input type="button" value="Load images" name="loadImages" id="btn">

        <div id="message"></div>

//javascript

//Call a function after matching images have finished loading
function imagesLoadedEvent(selector, callback) {
    var This = this;
    this.images = $(selector);
    this.nrImagesToLoad = this.images.length;
    this.nrImagesLoaded = 0;

    //check if images have already been cached and loaded
    $.each(this.images, function (key, img) {
        if (img.complete) {
            This.nrImagesLoaded++;
        }
        if (This.nrImagesToLoad == This.nrImagesLoaded) {
            callback(This.images);
        }
    });

    this.images.load(function (evt) {
        This.nrImagesLoaded++;
        if (This.nrImagesToLoad == This.nrImagesLoaded) {
            callback(This.images);
        }
    });
}

$("#btn").click(function () {
    var c = $("#container"), evt;
    c.empty();
    c.append("<img src='" + $("#img1").val() + "' width=94>");
    c.append("<img src='" + $("#img2").val() + "' width=94>");
    c.append("<img src='" + $("#img3").val() + "' width=94>");
    evt = new imagesLoadedEvent("img", allImagesLoaded);
});

function allImagesLoaded(imgs) {
    //this is called when all images are loaded
    $("#message").text("All images loaded");
    setTimeout(function() {$("#message").text("");}, 2000);
}

Answer 4

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

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

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

编辑：你可以用几毫秒做一个小的.delay（）或setTimeout，然后设置滑动动画。

Answer 5

我有一个类似的问题，使砌体网站响应。我使用window.onload等待所有元素在初始化masonry.js之前完成加载。我还将window.onload放在.onchange函数中，并且每次视口大小调整时都会触发它。

我相信应用类似的原则可以解决您的问题。

Answer 6

尝试一次

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

Answer 7

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

myDiv.onafterupdate = myHandler;

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

这对你有帮助吗？

Answer 8

在jquery中，您可以在DOM操作代码之后使用$（）。

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

$（）调用一个函数，该函数注册一个DOM-ready回调函数（如果函数传递给它）或者从DOM返回元素（如果选择器字符串或元素传递给它）

你可以在这里找到更多 difference between $ and $() in jQuery http://api.jquery.com/ready/