在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后，它將在控制台中顯示“下載頁面已加載”。

你可以嘗試這個小提琴

Answer 2

有一個DOMNodeInserted事件應該像document.ready一樣工作，但是對於各個DOM節點。 但它被棄用並且有很多問題。 StackOverflow用戶找到了一個很好的替代方案，在所有移動瀏覽器中運行良好： DOMNodeInserted的替代方案

Answer 3

這是一個函數，一旦匹配jquery選擇器的所有圖像都完成加載，它將觸發回調

Js小提琴樣本

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

Althoug我不完全確定你是如何加載內容的。 它是靜態的（已經存在但只是不可見？）或者它是否加載了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返回元素（如果選擇器字符串或元素傳遞給它）

你可以在這里找到更多
jQuery中$和$（）之間的區別
http://api.jquery.com/ready/