Je fais une application avec Chaque page est un Maintenant au problème: le glissement fonctionne bien, mais il est exécuté avant que le contenu du droit Je l'ai essayé avec Est-ce que quelqu'un sait comment je peux attendre pour que le PhoneGap et j'utilise une transition de la diapositive auto-construite pour modifier les pages.
Cela fonctionne comme ceci:
div avec une hauteur et une largeur de 100%, donc si je change la page, j'ai défini le prochain DIV directement à l'actif et glisser à la fois le côté gauche.
div est complètement chargé. Donc, le droit div glisse à vide et seulement après quelques centaines de milisecondes, le contenu apparaîtra.
document.ready , mais comme je l'ai lu cet événement n'est exécuté que la première fois que le DOM est chargé.
DOM soit complètement rendu après avoir manipulé le DOM avec JavaScript ? < / p>
8 Réponses :
Vous pouvez utiliser JQuery Ajax pour charger le contenu et exécuter une fonction avec la diapositive.
$("#page1").load('page2.html', function() {
//do your custom animation here
});
Merci pour votre réponse. Le contenu est dans la base de données mobile, donc je le prends de là, insérez-le dans la DIV, puis faites-le glisser dans. La chose avec le délai fixé est que les grandes pages ont besoin d'environ 600 ms, tandis que les petites pages ont besoin d'environ 50 ms. . Je ne veux pas attendre 600ms pour les petites pages simplement parce que les gros ont besoin de cette période .. Le contenu est parfois statique et parfois chargé d'une variable JavaScript.
Y a-t-il un rappel de votre requête de base de données à la fin des choses que vous pouvez attendre? Si vous utilisez Ajax, vous pouvez utiliser $ (document) .on ('AjaxComplete', fonction () {/ * do Animation * /});
Dans votre cas, vous pouvez choisir un élément dans le contenu du prochain div et continuer à le vérifier avec Vous pouvez essayer cette fonction: p> utilisation: p> $ (...). Longueur code>. Si la valeur est> 0, le DOM est chargé et vous pouvez modifier la page. (function() {
console.log('Next page loaded');
}).deferUntil(function() {
return $('#nextDiv').length > 0;
}, 3000);
Il existe un événement DOMNODERSERTED qui est censé fonctionner comme un document.Ready, mais pour des nœuds DOM individuels. Mais il est obsolète et a beaucoup de problèmes. Stackoverflow Les utilisateurs ont trouvé une bonne alternative qui fonctionne assez bien sur tous les navigateurs mobiles: alternative à domnodeinserted
J'ai eu un problème similaire faisant un site de maçonnerie réactif. J'utilise Je suis sûr que l'application de principes similaires résoudra votre problème. window.onload qui attend tous les éléments de terminer le chargement avant d'initialiser mayonry.js. J'ai également placé la fenêtre window.onload intérieure .nChange fonction et il est tiré à chaque fois que la fenêtre a redimensionnée.
essayez une fois
Peut-être que vous pouvez définir un événement sur votre DIV.
myDiv.onafterupdate = myHandler;
function myHandler() {
// Do here what you want to do with the updated Div.
}
Voici une fonction qui déclenchera un rappel une fois que toutes les images correspondant à un sélecteur JQuery ont fini de chargement
//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);
}
en jQuery, vous pouvez utiliser $ () juste après votre code de manipulation DOM.
$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});
Vous devez faire boucler les images sur la nouvelle page et vous assurer qu'ils ont tous une vraie propriété .Height (ce qui signifie qu'ils sont effectués en chargement) avant de lancer l'animation.