php - ajaxとjQueryを使用しているときに、完全にロードされた、または完全にロードされていないdiv内のajaxコンテンツ（画像とテキスト）を識別する方法は？

Question

$.ajax({
    type: 'POST',
    url: 'show-photo3.php',
    data: 'type='+type+'&count='+count+'&aid='+aid,
    dataType: 'html',

    success: function(response) {
        //alert(response);                      
        $('#vph').html(response);               
        $('#vph').fadeIn("1000");                
        newhight=$("#vph").height();                  
        $("#vph_outer").css('height',newhight);
     }           
});

これは、ajaxベースの画像ギャラリー用です。新しいコンテンツの高さに基づいて外側のdivのサイズを変更しようとすると。正しく動作しないということは、高さが間違っていることを意味します。高さをとると、ajaxの内容が完全に読み込まれないと思います。

Answer 1

アニメーションの完了後、fadeInのコールバック関数で高さを計算してみてください

$('#vph').fadeIn("1000", function(){
      newhight=$("#vph").height();   
      $("#vph_outer").css('height',newhight);
});

ajaxを介して画像をロードしている場合は、高さを計算する前にwaitForImagesプラグインを使用してみてください。

$('#vph').html(response).waitForImages(function() {               
    $('#vph').fadeIn("1000"), function(){
          newhight=$("#vph").height();   
          $("#vph_outer").css('height',newhight);
    })
});

Answer 2

var img = new Image();
img.src = img_url;
img.onload = function () {
//img was loaded
}