javascript - AJAX 调用 jQuery 后调整 div 大小

Question

我试图在通过 AJAX 加载新的 HTML 内容后调整 div 的大小。我有一个 hashbang 链接系统，如果 URL 中存在某些哈希值，它会加载特定的 HTML 片段。当按下链接加载内容时，div 高度会正确调整大小，但直接导航到页面时，加载内容的计算高度始终会减少 20px。

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

一个澄清的例子:

如果我直接导​​航到 www.homepage.com/docs/，然后单击其中一个帮助链接来加载内容，则高度计算得很好。但是，如果我导航到 www.homepage.com/docs/#!/history，计算出的高度始终比应有的高度小 20 像素左右。

Answer 1

当您直接导航到 #ajax_page_wrap div 时，是否有尚未加载的图像(并且 AJAX 调用在加载之前已完成)？

使用 $(window).load (等待所有图像加载)而不是 $(document).ready (不加载)怎么样？请参阅this answer.

希望有帮助!让我知道这是否不是问题，我会继续集思广益:)