jquery .htmlメソッドがレンダリングを完了するまで待ちます

Question

私は垂直スクロールバーでdivを持っています。 Divはajaxを介して動的に更新され、htmlはjQueryの.htmlメソッドを使用して挿入されます。 divが更新された後、スクロールバーが一番上に戻り、前の位置に保持しようとしています。

これは、私はそれをしようとしている方法です：

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos 
$.ajax({... 
    success: function(data) { 
     $('div#some_id').html(data.html_content); //insert html content 
     $('div#some_id').scrollTop(scrollPos); //restore scroll pos 
    } 
}); 

これが失敗しました。私の最高の推測は、挿入されたhtmlがレンダリングされないために失敗していることです（つまり、スクロールしない）。

たとえば、これは機能します。

setTimeout(function(){ 
    $('div#some_id').scrollTop(scrollPos); 
}, 200); 

これは私の意見では汚いハックです。私はいくつかのブラウザが挿入されたコンテンツをレンダリングするためにこれらの200ミリ秒以上を取らないことを知る方法がありません。

続行する前にブラウザが挿入されたHTMLのレンダリングを完了するのを待つ方法はありますか？

Answer 1

それはまだハックだし、本当にHTMLが実際に挿入され、準備ができたときのために利用可能なコールバックはありませんが、html_contentの要素が、彼らは本当に準備ができていることを確認するために、すべては200msに挿入されているかどうかをチェックできなど

あなたはおそらく間隔せずにこのような何かを、そしてDOMnodeInsertedにバインドし、そして最後の要素があるかどうかを確認でき、より高度なオプションについて

var timer = setInterval(function(){ 
    if ($("#lastElementFromAjaxID").length) { 
     $('div#some_id').scrollTop(scrollPos); 
     clearInterval(timer); 
    } 
}, 200); 

：

は、AJAX呼び出しからHTMLの最後の要素をチェック挿入された。 .html()は常に同期し

Answer 2

このようなコールバックが存在しない、私はちょうどここに1つの違いを指摘するようになる：.htmlを（）がロードを完了しましたが、ブラウザが実際にコンテンツをレンダリングする際の一つは、あります違うものです。読み込まれたコンテンツがテーブル、div、CSSスタイリング、イメージなどのようにやや複雑な場合、レンダリングはページ上にあるすべてのDOM要素よりも若干遅く完了します。すべてが存在するかどうかを確認するために、レンダリングが完了しているわけではありません。私は自分自身でこれに対する答えを探していました。今はsetTimeout関数を使用しています。

Answer 3

を動作するため

Answer 4

あなたは画像の読み込みを待っている場合は、1つのアプローチhttps://github.com/desandro/imagesloaded