我正在做一个应用程序，Phonegap并且我正在使用自建的幻灯片转换来更改页面。它是这样工作的：
每个页面都是div100% 的高度和宽度，所以如果我更改页面，我会将下一个div右侧设置为当前活动的并将两者都滑动到左侧。
现在来解决问题：滑动工作正常，但它是在右侧的内容div完全加载之前执行的。所以右边的div幻灯片是空的，只有在几百毫秒后才会出现内容。
我试过了document.ready，但正如我所读到的，这个事件只在第一次DOM加载时执行。
有谁知道在我操纵withDOM之后如何等待 再次完全渲染？DOMJavascript
在您的情况下，您可以在下一个 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);
上面的示例将检查id="nextDiv"每 20 毫秒（不超过 3 秒）的 div。加载 div 后，它将在控制台中显示“已加载下一页”。
你可以试试这个小提琴
有一个 DOMNodeInserted 事件应该像 document.ready 一样工作，但只针对单个 DOM 节点。但它已被弃用并且有很多问题。StackOverflow 用户找到了一个很好的替代方案，它在所有移动浏览器中都能很好地工作：DOMNodeInserted 的替代方案
这是一个函数，一旦与 jquery 选择器匹配的所有图像完成加载，就会触发回调
//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);
}
您可以使用 jQuery ajax 加载内容，并在成功时使用幻灯片运行一个函数。
$("#page1").load('page2.html', function() {
//do your custom animation here
});
尽管我不完全确定您是如何加载内容的。它是静态的（已经存在但只是不可见？）还是加载了 ajax？
编辑：您可以只用几毫秒做一个小的 .delay() 或 setTimeout，然后为滑动设置动画。
我有一个类似的问题，使砌体网站响应。我使用window.onloadwhich 在初始化 masonry.js 之前等待所有元素完成加载。我还放置了window.onloadinside.onchange函数，每次调整视口大小时都会触发它。
我相信应用类似的原则会解决你的问题。
试一次
$(window).bind('load',function(){
//code
});
也许你可以在你的 div 上设置一个事件。
myDiv.onafterupdate = myHandler;
function myHandler() {
// Do here what you want to do with the updated Div.
}
这对你有帮助吗？
在 jquery 中，您可以在 DOM 操作代码之后使用 $()。
$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});
$() 调用一个函数，该函数注册一个 DOM 就绪回调（如果将函数传递给它）或从 DOM 返回元素（如果将选择器字符串或元素传递给它）