javascript - document ready after dom manipulation - Stack Overflow

admin管理员组

文章数量:1279083

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 pletely 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 pletely rendered again after I've manipulated the DOM with Javascript?

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 pletely 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 pletely rendered again after I've manipulated the DOM with Javascript?

• javascript
• mobile
• dom-manipulation
• ready

Share Improve this question Follow edited Oct 26, 2012 at 9:09 Anupam 8,01633 gold badges4343 silver badges6363 bronze badges asked Oct 26, 2012 at 8:45 Michael KunstMichael Kunst 2,9882727 silver badges4040 bronze badges 1

• you need to loop through the images on the new page and make sure they all have a real .height property (meaning they are done loading) before you kick-off the animation. – dandavis Commented Oct 29, 2013 at 21:47

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3 +25

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

There is a DOMNodeInserted event that is supposed to work like document.ready but for individual DOM nodes. But it is deprecated and has lots of issues. StackOverflow users found a good alternative to it that works quite well in all mobile browsers: Alternative to DOMNodeInserted

Here is a function that will trigger a callback once all images matching a jquery selector have finished loading

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./wp-content/uploads/2010/11/Fractal-Art-Wallpapers-09.jpg" id="img2">
    <br><input type="text" value="http://pepinemom.p.e.pic.centerblog/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.plete) {
            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);
}

You could use jQuery ajax to load the content, and on success run a function with the slide.

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

Althoug I'm not pletely sure how you're loading the content. Is it static (Already there but just not visible?) Or is it loaded with ajax?

EDIT: You could just do a small .delay() or setTimeout with a few millisec, and then animate the sliding.

I had a similar problem making a masonry site responsive. I use window.onload which waits for all elements to plete loading before initialising masonry.js. I also placed the window.onload inside .onchange function and it fired everytime the viewport resized.

I am sure applying similar principles will solve your problem.

try once

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

Maybe you can set an event on your div.

myDiv.onafterupdate = myHandler;

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

Does this help you?

In jquery you could use $() just after your DOM manipulation code.

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

$() calls a function that either registers a DOM-ready callback (if a function is passed to it) or returns elements from the DOM (if a selector string or element is passed to it)

You can find more here
difference between $ and $() in jQuery
http://api.jquery./ready/

本文标签： javascriptdocument ready after dom manipulationStack Overflow