11

一部のコンテンツをdivにロードするjQueryajax関数があります。一部のコンテンツは画像です。ajaxにロードしたばかりの画像のロードが終了し、コンテンツの表示などの機能を実行するまで言いたいと思います。このように、コンテンツをdivにロードせず、画像のロードを開始します。それらをロードしてから、コンテンツまたはshow()コンテンツをdivに配置します。

を使用するなど、これに対する多くの解決策を見.load()てきましたが、ajaxを使用してロードされたコンテンツでは機能しないようです。

4

3 に答える 3

12

AJAX 呼び出しを介してロードされている画像に適用するには、AJAX コールバックにロード ハンドラーを追加する必要があります。読み込みハンドラが適用される前に画像が読み込まれた場合に備えて、タイマーを設定して、一定の間隔でコンテンツを表示することもできます。

$.ajax({
     ...
     success: function(data) {
          var imageCount = $(data).filter('img').length;
          var imagesLoaded = 0;
          $(data).hide()
                 .appendTo('#someDiv')
                 .filter('img')
                 .load( function() {
                     ++imagesLoaded;
                     if (imagesLoaded >= imageCount) {
                        $('#someDiv').children().show();
                     }
                  });
          setTimeout( function() { $('#someDiv').children().show() }, 5000 );
      }
});
于 2009-11-01T20:40:08.447 に答える
10

これは、提供されたコードtvanfossonの更新版です。

imageCount私が推測できる元のコードの問題であったように、変数が文字列ではなくノードリストをカウントしていることを確認する必要があります。

$.ajax({
    url      : 'somePage.html',  
    dataType : "html",
    success  : function(data) {

        $(data).hide().appendTo('#someDiv');

        var imagesCount = $('#someDiv').find('img').length;
        var imagesLoaded = 0;

        $('#someDiv').find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
                $('#someDiv').children().show();
            }
        });

        var timeout = setTimeout(function() {
            $('#someDiv').children().show();
        }, 5000);
    }                     
});
于 2010-06-08T16:55:02.983 に答える
0

$("img").load()画像は動的に読み込まれるため、機能しません。そのコマンドは、その時点でページ上の画像にのみ適用されます。

$("img").live("load")画像がいつ読み込まれたかを追跡するために使用します。

于 2009-11-01T20:38:06.560 に答える