有没有一种编程方法来知道jQuery的DOM更新何时完成

Question

例如：

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

如果 #myContainer 是一个空的div，则宽度和高度仍将为零。 解决方案是使用超时：

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

但是，我不喜欢那里的神奇数字。 如果它是一个非常慢的浏览器怎么办？ 是否有任何可靠的跨浏览器方法可以告诉我浏览器何时呈现了更改？

Answer 1

您可以可靠地使用 0 作为超时。它实际上不会是 0ms，你明白，大多数浏览器会让它至少 5 或 10，但只要屈服于浏览器的行为就足够了。

也就是说，我不会立即找到一个没有立即获得（新）高度的浏览器，没有产量（甚至IE6！但是，如果根据标记等，有一个，我不会感到惊讶......

Answer 2

感觉像一个黑客，但可能会起作用：将脚本元素作为最后一个元素添加到 DOM 中。所有浏览器都应该在所有其他元素"稳定"后执行。

Answer 3

你在用 ajax 吗？

所以你可以使用jQuery'load'。

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