Ajaxの負荷doesntのは、私が高さ

Question

イムを計算しようとすると、ロードするIMGのを待つhttp://davidpetersson.nu/madartwork/

に取り組んcurrentyl、私は私のスタートページ上のdivにpostsからものをロードします。ウィッチが働いている。キンダー。

私は、特定のdivと、投稿からコンテンツを取得してdivにロードするclickイベントを持っています。 divはiがロードされるまで高さが0pxです。次にコンテンツを測定し、コンテンツに合わせて高さをアニメーション化します。

テキストで動作しますが、写真を含む投稿を読み込もうとすると、測定時にイメージが完全に読み込まれないことがあります。

例。 「バンド6」私が使用したスクリプトは次のようになり

をクリックしてください：

jQuery(document).ready(function(){ 

    var $mydiv = jQuery('#single-post-container'); 
    $mydiv.css('height', $mydiv.height()); 
    jQuery.ajaxSetup({cache:false}); 


    jQuery(window).resize(function() { 
     jQuery("#single-post-container").wrapInner('<div/>'); 
     var newheight = jQuery('div:first',"#single-post-container").height(); 
     jQuery("#single-post-container").css({height: newheight}); 
    }); 

    jQuery(".view-details").click(function(event123){ 
     event123.preventDefault(); 
     var post_id = jQuery(this).attr("href"); 

     jQuery("#single-post-container").load(post_id + " .post", function(){ 

      jQuery('#single-post-container').wrapInner('<div/>'); 
      var newheight = jQuery('div:first','#single-post-container').height(); 

      //Does sometimes not include the height of the images, since they havnt completely loaded 

      jQuery('#single-post-container').animate({height: newheight}); 

      jQuery('html, body').animate({ 
       scrollTop: jQuery('body').offset().top 
      }, 800); 

     }); 
     return false; 
    }); 
}); 

私はこのポストjQuery Ajax wait until all images are loaded

から.imagesLoaded inlcudeしようとしたが、私はそれが仕事を得ることに成功したhavent。

（代わりに$をwordpressのために使用されているのjQueryの）

これが私の最初のAJAXスクリプト-tinkeringsの一つであり、そのようなものは本当に間違っている、とても穏やかであるかもしれない:)

Answer 1

2つのこと：

1. $でjQueryアクセス可能なファイルをready stateにすることができます。 functionの最初のパラメータとして$を渡すだけです。今では知られているように内側に$を使用できます。あなたがどこかでコードを再利用したいときは、さらに優れています。

2. コンテナ内にimgのローディングを追跡することができます。ロード・コールバックでコードをラップするだけで、すべてがロードされたら、あなたの作業を行います。

---

jQuery(function($) { 
    var $mydiv = $('#single-post-container'); 
    $mydiv.css('height', $mydiv.height()); 
    $.ajaxSetup({ 
     cache: false 
    }); 

    $(window).resize(function() { 
     $("#single-post-container").wrapInner('<div/>'); 
     var newheight = $('div:first', "#single-post-container").height(); 
     $("#single-post-container").css({ 
      height: newheight 
     }); 
    }); 

    $(".view-details").click(function(event123) { 
     event123.preventDefault(); 
     var post_id = $(this).attr("href"); 

     $("#single-post-container").load(post_id + " .post", function() { 
      $('#single-post-container').wrapInner('<div/>'); 

      var callback = function() { 
       var newheight = $('div:first', '#single-post-container').height(); 

       $('#single-post-container').animate({ 
        height: newheight 
       }); 

       $('html, body').animate({ 
        scrollTop: $('body').offset().top 
       }, 800); 
      } 

      // wait for all images to be loaded 
      var count = $('#single-post-container').find('img').load(function() { 
       if (--count === 0) { 
        callback(); 
       } 
      }).length; 

      // or if no image available 
      if(count === 0) { 
       callback(); 
      } 
     }); 

     return false; 
    }); 
});