在AJAX调用jQuery后调整div的大小

Question

I am attempting to resize a div after I load in new HTML content via AJAX. I have a hashbang linking system that loads up particular HTML snippets if certain hashes are present in the URL. The div height resizes correctly when links are pressed to load in the content, but the computed height of the loaded content is consistently 20px less when the page is navigated to directly.

HTML:

<div id="help_page_header">
      <h3>Need some help with searches?</h3>
      <ul class="help_tabs">
        <li class="help_tab"><a class="docs_link" rel="recommendations" href="#!/recommendations">Recommendations</a></li>
        <li class="help_tab"><a class="docs_link" rel="whats_hot" href="#!/whats_hot">What's Hot</a></li>
        <li class="help_tab"><a class="docs_link" rel="history" href="#!/history">History</a></li>
        <li class="help_tab"><a class="docs_link" rel="misc" href="#!/misc">Additional Features</a></li>
      </ul>
      </div>
      <div class="help_page_content">
        <p>Select a help topic above!</p>
      </div>
 ...

jQuery:

$(document).ready(function(){
  if(window.location.hash)
  {
    loadContent(window.location.hash)
  }

  $(".docs_link").click(function(e){
    $(".help_page_content").html("")
    var fragment = this.hash
    loadContent(fragment)
  });

  function loadContent(fragment)
  {
    fragment = fragment.slice(1).replace(/!\//g, "");
    $(".help_page_content").load("./"+fragment+".html", function(){
      var height = $("#ajax_page_wrap").outerHeight();
      $(".help_page_content").animate({height: height}, 500);
    });
  }
});

An example to clarify:

If I navigate to www.homepage.com/docs/ directly, and then click one of the help links to load content, the height is computed fine. However, if I navigate to www.homepage.com/docs/#!/history, the computed height is always about 20px less than it should be.

Answer 1

Is there an image inside the #ajax_page_wrap div that is not yet loaded when you navigate directly there (and the AJAX call is completing before it's loaded)?

What about using $(window).load (which waits for all the images to load) instead of $(document).ready (which does not). See this answer.

Hope the helps! Lemme know if that's not the issue and I'll keep brainstorming :)