Есть ли программный способ узнать, когда обновления DOM от jQuery были завершены?

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 для тайм-аута, надежно.Понимаете, на самом деле это не будет 0 мс, большинство браузеров сделают это по крайней мере 5 или 10, но достаточно просто уступить браузеру.

Тем не менее, я ненемедленно найти браузер, который сразу не получает (новую) высоту сразу, без выхода (даже IE6!).Но я бы не удивился, если бы, в зависимости от разметки и тому подобного, был один ...

Answer 2

Вы используете AJAX?

Так что вы можете использовать jQuery 'load'.

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

Answer 3

Похоже на хак, но может работать: добавьте элемент сценария в DOM в качестве последнего элемента Все браузеры должны выполнить это после того, как все остальные элементы "установились".