Is there a programatic way of knowing when DOM updates by jQuery have been completed?

For example:

var $myContainer = $('#myContainer');
$myContainer.html(someHtml);
var width = $myContainer.height();
var height = $myContainer.height();

If #myContainer was an empty div, width and height would still be zero. A solution is to use a timeout:

var $myContainer = $('#myContainer');
$myContainer.html(someHtml);
setTimeout(function () {
    var width = $myContainer.height();
    var height = $myContainer.height();
}, 500);

However, I don't like the magic number in there. What if its a really slow browser? Is there any reliable cross browser method available to tell me when the browser has render开发者_C百科ed the changes?

---

You can use 0 for the timeout, reliably. It won't actually be 0ms, you understand, most browsers will make it at least 5 or 10, but just the act of yielding to the browser is sufficient.

That said, I'm not immediately finding a browser that doesn't get the (new) height right immediately, without a yield (even IE6!). But I wouldn't be surprised if, depending on markup and such, there were one...

---

Feels like a hack but might work: Add a script element to the DOM as the last element. All browsers should execute that after all the other elements have "settled."

---

Are you using ajax?

So you can use jQuery 'load'.

var $myContainer = $('#myContainer');
$myContainer.load('/url/for/someHtml', function(){
  var width = $myContainer.height();
  var height = $myContainer.height();
});