0

私は一般的にjQuery、AJAX、およびWeb開発にかなり慣れていないので、これは私を夢中にさせています。

ページコンテンツを現在のコンテンツに取り込むAJAXリクエストがあり、jQueryに次のように表示させようとしています。

  1. 現在のコンテンツをフェードアウトする
  2. divのサイズを新しいコンテンツにスムーズに変更
  3. 新しいコンテンツでフェードイン

これまでのところ、私はそれをこのように書いています。私はそれを一気に変更したので、これは私が得たものに最も近いものではないかもしれませんが、同じ問題がまだ続いています。

$("#page-data").fadeOut(600).html(data);

$("#page-data").ready(function() {
    var newHeight = $('#' + divname).height();
    $("#page-data").animate({
        height: newHeight,
    }, 600, function() {
        $("#page-data").fadeIn(100);
    });
});

ページデータがこの単純なスタイルを持っているところ：

#page-data { position: relative; overflow: hidden; }

私の問題は$('#' + divname).height()、divで発生する可能性のある画像やその他のことを考慮していないことです。.load()の代わりにを使用してみ.ready()ましたが、コールバックがまったく呼び出されません。

4

1 に答える 1

1

質問にはHTMLが含まれていないため、動的コンテンツをロードする別の（で識別される）<div id="pageData">を保持するコンテナーがあると想定しています。<div>divname

まず、オブジェクトで$(..).ready()のみ使用できるdocumentため、オブジェクトに適用すると、<div>jQueryのドキュメントに反します。

私があなたの目標を達成するために考えることができる最善の方法は、AJAXを介して動的にロードしたHTML内の画像を追跡し、すべてがロードされるまでそれらを監視することです。次に、コンテナの高さを設定するためのロジックを適用できます<div>。

問題は、loadすでにロードされている画像にイベントハンドラーを適用すると、起動しないことです。画像がすでに読み込まれているかどうかを判断するのは難しい場合がありますが、受け取った知識は、completeプロパティ（存在する場合）を確認するか、画像の高さが0より大きいかどうかを確認することです。

function imageLoaded(img) {
    if(typeof img.complete != 'undefined') {
        return img.complete;
    }
    else {
        return(img.height > 0);
    }
}

これで、次の手順を実行できます。

  1. AJAXコンテンツを含む<div>（例）をフェードアウトします#pageContent
  2. AJAXコンテンツをロードする
  3. 新しいコンテンツですべての画像を検索し、画像の数を数え、load各画像にイベントハンドラーを追加してから、各画像が既に読み込まれているかどうかを確認し、読み込まれている場合は手動でloadイベントを発生させます。
  4. loadイベントでは、カウンターをデクリメントします。カウンターがゼロに達したら、コンテナーの高さを計算<div>し、コンテンツをフェードインします

たとえば（動作するjsfiddleについてはここを参照してください）：

$pageData = $('#pageData');
$pageContent = $('#pageContent');

$pageData.height($pageData.height());

$pageContent.fadeOut(function() {
    $pageContent.load('http://your.dynamic.content', contentLoaded);
});

function contentLoaded() {
    var $loadables = $(this).find('img');
    var loadableCount = $loadables.length;

    // Attach onLoad event handlers to each image
    $loadables.load(function() {
        loadableCount--;
        checkAllLoaded(loadableCount);
    });

    // Trigger the onLoad events manually for any images that have already loaded
    $loadables.each(function() {
        if(imageLoaded(this)) {
            $(this).trigger('load');
        }
    });
}

function checkAllLoaded(loadCount) {
    if (loadCount <= 0) {
        $('#pageData').animate({
            height: $('#pageContent').height()
        }, 600, function() {
            $('#pageContent').fadeIn();
        });
    }
}
于 2012-12-13T18:38:44.897 に答える