Question

我正在使用Phonegap进行应用程序，并且我正在使用自建幻灯片转换来更改页面。它的工作原理如下：

每个页面都是div，其高度和宽度均为100％，因此，如果我更改了页面，我会将下一个div权限设置为当前有效，并向左侧滑动。

现在问题：滑动工作正常，但是在完全加载右div的内容之前执行。因此，右div幻灯片为空，只有在几百毫秒之后内容才会出现。

我尝试使用document.ready，但正如我所读到的，此事件仅在第一次加载DOM时执行。

在我使用DOM操纵DOM之后，是否有人知道如何等待Javascript再次完全呈现？

Answer 1

有一个DOMNodeInserted事件应该像document.ready一样工作，但是对于单个DOM节点。但它被弃用并且有很多问题。 StackOverflow用户找到了一个很好的替代方案，在所有移动浏览器中运行良好：Alternative to DOMNodeInserted

Answer 2

这是一个函数，一旦匹配jquery选择器的所有图像都加载

，它就会触发回调

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

您可以使用jQuery ajax加载内容，并在成功时使用幻灯片运行一个函数。

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

Althoug我不完全确定你是如何加载内容的。它是静态的（已经存在但只是不可见？）或者它是否加载了ajax？

编辑：你可以用几毫秒做一个小的.delay（）或setTimeout，然后为滑动设置动画。

Answer 4

我有一个类似的问题，使砌体网站响应。我使用window.onload等待所有元素在初始化masonry.js之前完成加载。我还将window.onload置于.onchange函数内，并且每次调整视口大小时都会触发它。

我确信应用类似的原则可以解决您的问题。

Answer 5

尝试一次

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

Answer 6

也许你可以在div上设置一个事件。

myDiv.onafterupdate = myHandler;

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

这对你有帮助吗？

Answer 7

在jquery中，您可以在DOM操作代码之后使用$（）。

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

$（）调用一个函数，该函数注册一个DOM就绪的回调（如果将函数传递给它）或从DOM返回元素（如果将选择器字符串或元素传递给它）

您可以在此处找到更多内容
difference between $ and $() in jQuery
http://api.jquery.com/ready/

在dom操作之后准备文件

7 个答案: