Кога заредените AJAX DOM възли са готови?

Ако в уеб страница заредя някакво съдържание след първоначалното зареждане на страницата и събитието DOM ready, кога вмъкнатите възли са „готови“, в смисъл да бъдат изчислени техните размери, като се вземат предвид 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);
    }
});

Има ли някакъв вид събитие, като „on inserted dom ready“ или нещо, което да може да изпълни функция след като са изчислени размерите/оформлението на вмъкнатото 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)


Вашият проблем не трябва да се случва, както го описвате. Добавянето на елементи в страница не е асинхронна операция. Манипулирането на Javascript DOM не е многонишково. Той просто се връща след прилагане на промените в 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