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，计算出的高度总是比它应该低20px。

Answer 1

当你直接导航时，#ajax_page_wrap div中是否有一个尚未加载的图像（并且AJAX调用在加载之前完成）？

如何使用$(window).load（等待加载所有图像）而不是$(document).ready（没有）。见this answer.

希望有所帮助！ Lemme知道这不是问题，我会继续头脑风暴：）

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

1 个答案: