Когда готовы узлы DOM, загружаемые с помощью AJAX?

Если на веб-странице я загружаю некоторый контент после начальной загрузки страницы и события готовности DOM, когда вставленные узлы «готовы» в смысле вычисления их размеров с учетом правил CSS и всего?

$.ajax({
    url: ajaxUrl,
    success: function (data) {

        var page = $(data).find('.page').first();

        page.appendTo(pages_container);

        // if I try to get the width of an element here, I get 0
        console.log(page.width()); // -> 0

        // but if I do it, let's say 500ms later, now it is computed
        setTimeout(function () {
            console.log(page.width()); // -> correct width, non zero
        }, 500);
    }
});

Есть ли какое-либо событие, например «при вставке dom готово» или что-то, что позволяет выполнить функцию после вычисления размеров/макета содержимого, вставленного ajax?


person NeuronQ    schedule 08.05.2014    source источник
comment
@KhorneHoly — параметр success не устарел. Кажется, вы путаете его с методом success для объекта jqXHR.   -  person Quentin    schedule 08.05.2014
comment
onLoad тега body — это событие, которое запускается, когда все ресурсы, включая структуру dom, загружаются на страницу.   -  person dreamweiver    schedule 08.05.2014
comment
@dreamweiver тело родительской страницы? это было бы странно... насколько я понимаю, это не так.   -  person NeuronQ    schedule 08.05.2014
comment
Вы добавляете изображения? Если это так, вы не можете вычислить их ширину, пока они не будут загружены.   -  person Blazemonger    schedule 09.05.2014


Ответы (1)


Ваша проблема не должна возникать, как вы описываете. Добавление элементов на страницу не является асинхронной операцией. Манипуляции с DOM в Javascript не являются многопоточными. Он просто возвращается после применения изменений DOM.

DOM должен быть готов к использованию, как только ваше добавление завершится (включая свойства размера):

page.appendTo(pages_container); 

Обычной причиной является доступ к свойствам до того, как объект jQuery вставлен, или новый объект jQuery визуально скрыт и отображается позже (fadein и т. д.), но я не вижу переходов в вашем коде.

Вопросы/мысли:

  • Можете ли вы смоделировать JSFiddle, чтобы воспроизвести вашу проблему?
  • Также проверьте наличие других плагинов и т. д., которые могут изменить ваш DOM после вставки.
  • Есть ли код JS на вставленной странице?
  • И с каким браузером это произошло?
person Gone Coding    schedule 08.05.2014
comment
на самом деле да, на странице есть код js, и код, который на самом деле должен получить ширину/высоту, сам внутри загруженной страницы на самом деле, но то же самое происходит и в success, и если я разбрызгаю вокруг несколько операторов журнала, я вижу, что код действительно запускается после успеха... это большая страница faaaat, но я попытаюсь извлечь проблему на скрипке - person NeuronQ; 08.05.2014
comment
ааа, вы имеете в виду, что код внутри html-фрагмента, вставленного ajax, может быть запущен до того, как этот фрагмент будет правильно вставлен в DOM? ... это бы объяснило это ... но как, черт возьми, я мог бы это решить? - person NeuronQ; 08.05.2014
comment
Да, он может запустить загруженный JS на отключенном элементе, как только вы примените вызов $(data) к загруженному необработанному HTML/тексту. Должен ли JS быть внутри загруженной страницы? Можете ли вы показать код на этой странице, если это другая проблема? - person Gone Coding; 08.05.2014
comment
Не могу показать страницу, это часть интерфейса администратора. Но я сделаю более простой макет, пытаясь воспроизвести проблему, когда у меня будет время. На данный момент я только что нашел конкретный уродливый хак, который позволяет мне полностью избежать проблемы, но я все равно буду копать глубже в поисках решения/объяснения этого... - person NeuronQ; 09.05.2014