1

通过 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，计算出的高度总是比应有的低 20px 左右。

4

1 回答 1

0

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

使用$(window).load（等待所有图像加载）而不是$(document).ready（不加载）怎么样。看到这个答案。

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

于 2012-05-17T15:03:41.497 回答