1

AJAXを介して新しいHTMLコンテンツを読み込んだ後、divのサイズを変更しようとしています。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/に直接移動し、ヘルプリンクの1つをクリックしてコンテンツを読み込むと、高さが正しく計算されます。ただし、www.homepage.com / docs /＃！/ historyに移動すると、計算された高さは常に本来よりも約20px低くなります。

4

1 に答える 1

0

#ajax_page_wrapそこに直接移動したときにまだ読み込まれていない画像が div 内にありますか (そして、読み込まれる前に AJAX 呼び出しが完了しています)?

（ロードしない）$(window).loadの代わりに（すべての画像がロードされるのを待つ）を使用するのはどうですか。この回答$(document).readyを参照してください。

役立つことを願っています！それが問題ではないかどうかを教えてください。ブレインストーミングを続けます:)

于 2012-05-17T15:03:41.497 に答える