The document is ready after manipulating the house

Question

I am Phonegap application with Phonegap and I am using the built-in slide transition to change pages. It works as follows:

Each page has a div with 100% height and width, so if I change the page, I set the next div on the right to the current asset and move both on the left.

Now to the task: the sliding works fine, but is executed before the contents of the right div are fully loaded. Thus, the right div will show the slides empty, and only after a few hundred milliseconds will the content appear.

I tried it with document.ready , but since I read this event, it only executes the first time the DOM loads.

Does anyone know how I can wait until the DOM is fully displayed after I process the DOM with Javascript ?

Answer 1

In your case, you can select one element in the contents of the next div and continue checking it with $(...).length . If the value is> 0, the DOM loads and you can change the page.

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

Using:

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

In the above example, a div with id="nextDiv" will be checked every 20 ms (no more than 3 seconds). When the div is loaded, the console displays "Next page loaded."

You can try fiddle

Answer 2

Here is the function that will call the callback as soon as all the images matching the jquery selector finish loading

Js Fiddle Example

 //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.pepic.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 3

You can use jQuery ajax to load content and if the function starts with a slide successfully.

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

Althoug I'm not quite sure how you upload content. Is it static (already there, but just not visible?) Or is it loaded using ajax?

EDIT: you can just do a small .delay () or setTimeout with a few milliseconds and then animate the moving one.

Answer 4

There is a DOMNodeInserted event that should work like document.ready, but for individual DOM nodes. But it is outdated and has many problems. StackOverflow users have found a good alternative that works well in all mobile browsers: DOMNodeInserted Alternative

Answer 5

I had a similar problem that made a responsive site. I am using window.onload , which expects all items to be loaded before masonry.js is initialized. I also placed window.onload inside .onchange , and it started every time the viewport was resized.

I am sure that applying these principles will solve your problem.

Answer 6

try once

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

Answer 7

Perhaps you can set the event in your div.

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

Does this help you?