阿賈克斯負載犯規等待IMG加載當我試圖計算高度

Question

林currentyl上http://davidpetersson.nu/madartwork/

工作，我想從帖子的東西加載到我的起始頁一個div。很有用。均田。

我有一個特定的div和一個點擊事件，從帖子和ajax中獲取內容 - 將它加載到div中。 div的高度爲0px直到我加載，然後我測量的內容和動畫的高度，以配合內容。

它適用於文本，但是當我嘗試加載包含圖片的帖子時，有時圖片在我測量時尚未完全加載。

例子。點擊「六級」

我用的腳本是這樣的：

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; 
    }); 
}); 

我試圖inlcude從這個帖子jQuery Ajax wait until all images are loaded

.imagesLoaded但我還沒有設法得到它的工作。

（jQuery的，而不是$的使用，因爲WordPress的）

這是我的第一個AJAX腳本，tinkerings之一，所以東西可能是真的錯了，所以，請溫柔:)

Answer 1

兩件事情：

1. 您可以通過ready state內部的$訪問jQuery。只需通過$作爲內部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; 
    }); 
});