6

私はアプリケーションをPhonegap使用しており、自作のスライド遷移を使用してページを変更しています。それはこのように動作します：

すべてのページはdiv高さと幅が 100% であるため、ページを変更する場合はdiv、現在アクティブなページの次の右側を設定し、両方を左側にスライドします。

問題: スライドは正常に動作しますが、右側のコンテンツdivが完全に読み込まれる前に実行されます。したがって、右のdivスライドは空になり、数百ミリ秒後にのみコンテンツが表示されます。

で試してみdocument.readyましたが、私が読んだように、このイベントは が初めてDOMロードされたときにのみ実行されます。

withDOMを操作した後、 が再び完全にレンダリングされるのを待つ方法を知っている人はいますか?DOMJavascript

4

8 に答える 8

3

あなたの場合、次の div のコンテンツで 1 つの要素を選択し、それをチェックし続けることができ$(...).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"、20ms (3 秒以内) ごとに div をチェックします。div が読み込まれると、コンソールに「次のページが読み込まれました」と表示されます。

このフィドルを試すことができます

于 2013-10-30T15:51:54.957 に答える
1

document.ready のように機能するが、個々の DOM ノードに対して動作するはずの DOMNodeInserted イベントがあります。しかし、それは推奨されておらず、多くの問題があります。StackOverflow ユーザーは、すべてのモバイル ブラウザーで非常にうまく機能する、それに代わる優れた方法を見つけました。

于 2013-11-04T05:53:40.403 に答える
1

jquery セレクターに一致するすべての画像の読み込みが完了すると、コールバックをトリガーする関数を次に示します。

JS フィドルのサンプル

//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);
}
于 2013-11-05T16:05:24.020 に答える
0

jQuery ajax を使用してコンテンツをロードし、成功したらスライドで関数を実行できます。

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

コンテンツをどのようにロードしているかは完全にはわかりません。それは静的ですか（すでに存在しますが、表示されていませんか？）またはajaxがロードされていますか？

編集:数ミリ秒で小さな .delay() または setTimeout を実行してから、スライドをアニメーション化できます。

于 2012-10-26T08:59:12.470 に答える
0

石積みのサイトをレスポンシブにするのと同様の問題がありました。window.onloadmasonry.js を初期化する前に、すべての要素の読み込みが完了するまで待機する whichを使用します。window.onload内部関数も配置し.onchange、ビューポートのサイズが変更されるたびに起動しました。

同様の原則を適用すると、問題が解決すると確信しています。

于 2013-11-05T08:17:29.387 に答える