Как знать, был ли стиль css полностью применен к динамически добавленному содержанию

Случай: Содержание динамично добавляется к некоторому отделению (использующий jQuery). Содержание содержит довольно большую сумму элементов (скажите 1000 отделений).

Тогда я должен вычислить правильные размеры элементов (на самом деле, мне нужна ключевая позиция в пкс, таким образом, я использую положение jQuery() функция). Сначала я начал вычислять прямо после содержания, где добавлено.

Проблема состоит в том, что ИНОГДА ключевая позиция вычисляется неправильно, я верю (и совершенно уверенный), который является из-за стилей CSS где не правильно применен все же к тому содержанию.

Я пытался решить эту проблему, начинающуюся к состоящему из клеток после некоторого перерыва (использующий setTimeout) после того, как содержание было добавлено. Больше перерыва, который я использую (я проверил с 20 до 500 мс) браузер большего количества времени должно применить стили и меньше вероятности неправильного вычисления.

Проблема состоит в том, что это решение с перерывом не на 100% надежно и безопасно, и я должен использовать довольно большой перерыв, чтобы гарантировать правильность процесса, и это может ухудшить общую производительность процесса.

Таким образом, я должен знать, когда стили были полностью применены и когда я могу начать вычисления положения. Что может вы совет, быть там каким-либо надежным способом сделать это?

0
Стили CSS немедленно применяются, таким образом, проблема в другом месте. Если ваш процесс для вычисления положений включает знание измерения отделения, просто знайте, что, если измерение не определяется в CSS, вы не можете извлечь размер невидимого пункта это hasn' t предоставленный на экране.
добавлено автор frenchie, источник
@WHITECOLOR: нет, я хотел присутствовать isn' t достаточно; чтобы вычислить, элементы размеров должны быть видимы. I' m работающий над приложением, где содержание полностью произведено во времени выполнения с JavaScript и .html() и I' ve врезался в ту проблему самостоятельно также.
добавлено автор frenchie, источник
It' s трудно, чтобы точно определить проблему без некоторого кода, чтобы посмотреть на; I' m просто обменивающийся подобным опытом I' ve имел, и это вызвало меня некоторый беспорядок также. После .html() содержание предоставлено и если контейнер видим тогда, можно получить размеры никакая проблема. Кроме того, стили CSS немедленно применяются так, чтобы can' t быть причиной ваша проблема.
добавлено автор frenchie, источник
Есть ли среди динамического контента изображения?
добавлено автор Alexander, источник
сделайте ВСЕ свои манипуляции DOM в $ (документ) .ready (функция() {/ / Здесь}); вместо того, чтобы использовать перерывы, чтобы ждать элементов DOM, чтобы загрузить. Кроме того, все новые браузеры поддерживают dev инструменты (Пресса F12), используют это, чтобы предназначаться на конкретном элементе и проверить его свойства CSS.
добавлено автор KBN, источник
если это - потому что у некоторых элементов могло бы быть дополнение, и вы, вероятно, получаете их ширины/высоты CSS собственностью вместо .outerHeight() или .outerWidth ()
добавлено автор w3jimmy, источник
@Alexander никакие изображения. Просто текст.
добавлено автор WHITECOLOR, источник
@w3jimmy I' m использующий jquery' s положение ().
добавлено автор WHITECOLOR, источник
Содержание @frenchie помещается с jquery' s HTML (), как я знаю, это синхронно, таким образом, все содержание присутствует в DOM, когда вычисление начинается.
добавлено автор WHITECOLOR, источник
@frenchie, что действительно подразумевает видимый? (мое содержание находится в отделении, которое не скрыто, показ: блок) Поэтому, когда содержание становится "видимым" после HTML (..) был назван?
добавлено автор WHITECOLOR, источник
Содержание видимо. И я МОГУ получить размеры, но они НЕПРАВИЛЬНЫЕ, который означает, что в большинстве случаев я имею, говорит вершина = 190 пкс, но иногда 160 пкс; "стили CSS немедленно применяются", ничего немедленно не происходит в браузере особенно, который касается визуального предоставления есть такая вещь как обратное течение страницы (developers.google.com/speed/articles/reflow) это занимает время. Я думаю, что проблема там. Я связал, чтобы ускорить HTML помещения на странице prerendring и использованием innerHTML (прежде чем это, я поместил documentFragment) - который увеличил ситуацию (меньший перерыв), но я didn' t решают проблему.
добавлено автор WHITECOLOR, источник

2 ответы

Использовать Поджигателя или инструменты Dev Google Chrome? Щелчок правой кнопкой мыши по проблемной области и выбору "Осматривает Элемент", покажет код, как это после jQuery или любого другого JavaScript сделал его вещь.

Чтобы видеть , сколько времени это берет (на вашем центральном процессоре, который является) для jQuery, чтобы сделать желаемые действия, можно сохранять инспектор кода инструментов Dev Google Chrome открытым, обновить страницу и надо надеяться видеть, что код изменяется или не изменяется. Это - способ, которым я сделал бы это.

0
добавлено

Я выясняю, где проблема, это было в динамично прикладном стиле страницы (тег style, созданный динамично), хотя есть перерыв, должен был ждать после того, как этот стиль добавляется к странице. И вычисление положения нескольких раз все еще может потерпеть неудачу, если перерыв недостаточно. Не самая надежная стратегия, хотя - (

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)