1

AJAXを使用して、ページAのページBのコンテンツを表示します。

コンテンツが表示される前に、jQueryにすべて（テキスト、画像など）がロードされるのを待機させるにはどうすればよいですか？

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
    }
});

beforeSendを使用して、AJAXリクエストが処理されているときにユーザーに読み込みアニメーションを表示します。ここで、待機時間を「延長」して、すべての画像が読み込まれるまで読み込み中のアニメーションが消えないようにします。

$("body").on("load", "images class here", function() {//show content})最初に追加されたデータを非表示にし、すべての画像が読み込まれるのを待ってからコンテンツを表示しようとしまし successたが、イベントは発生していないようです。

何か案は？

アップデート：

更新されたコード：

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
        $("body").on("onload", "img", function() {//display content});
    }
});
4

2 に答える 2

4

直接イベントバインディングを使用する必要があります。

$("body img").on("load", function () { });
$("body .image-class").on("load", function () { });

委任されたバインディングではなく：

$("body").on("load", "img", function() { });
$("body").on("load", ".image-class", function () { });

委任されたバインディングはイベントのバブリングに依存しますが、すべてのイベントがバブリングするわけではありません。そして"load"、少なくとも-からのイベントはそう<img>ではないようです。

例： http： //jsfiddle.net/DLy6j/

于 2012-05-30T21:03:48.147 に答える
0

画像の場合、すべての画像のonloadイベントをキャッチする必要があります。したがって、成功のコールバックを取得したら、すべての画像を見つけ、「onload」イベントを追加し、すべての画像が読み込まれたら計算します。

于 2012-05-30T19:07:16.990 に答える