UpdatePanel - Есть идеи, как избежать мерцания в пользовательском интерфейсе? - ASP.NET/Jquery

Question

У меня довольно сложный интерфейс. Однако для целей этого вопроса, скажем, есть HTML-таблица, которая отображает UILayout1 по умолчанию (скажем, режим по умолчанию). Есть кнопка, которую пользователь может использовать для переключения между режимом по умолчанию и режимом предварительного просмотра (UILayout2)

В режиме предварительного просмотра в таблице есть некоторые невидимые столбцы, и происходит переупорядочение строк. Я использую JS (JQuery) при загрузке, чтобы проверить режим и изменить его соответственно.

Таблица и кнопка переключения находятся в UpdatePanels.

Функционально все работает как положено. Тем не менее, когда пользователь переключается между режимом по умолчанию и режимом предварительного просмотра или наоборот, существует такой короткий интервал времени, в течение которого таблица отображается по умолчанию, а затем запускается JS для внесения изменений.

Это приводит к ухудшению опыта пользовательского интерфейса. Есть ли какие-нибудь творческие способы избежать этого "мерцания"?

Answer 1

Вероятно, проблема в том, что ваш код работает под нагрузкой. Я предполагаю, что вы делаете это, используя стандартный метод jQuery для запуска кода под нагрузкой, а не через событие onload окна. В любом случае, даже использование jQuerys $(document).ready(...) будет слишком медленным, если у вас есть много других файлов javascript для загрузки, поскольку событие .ready не запускается в документе, пока не будут загружены все включенные javascript.

Вы должны быть в состоянии обойти эту проблему, включив свой код, который изменяет таблицу сразу после HTML-кода для таблицы на вашей странице, и не запускать ее при загрузке, т.е. убедитесь, что вы не переносите ее в $(document).ready(...);

Чтобы этот подход работал, вам понадобится весь javascript, необходимый для кода, который модифицирует таблицу, включенную ранее в страницу.

Если у вас есть другие ненужные файлы JavaScript, попробуйте включить их позже на странице.

Я не уверен на 100%, как это повлияет на положение внутри панели обновлений - вам нужно будет убедиться, что ваш код повторно запускается при обновлении панели обновления, но я считаю, что все это должно произойти автоматически.

Answer 2

вы можете использовать DIVs или не использовать панель обновления в вашем пользовательском интерфейсе, используйте любую другую концепцию

Answer 3

Предположительно, ваш пользовательский интерфейс управляется CSS? Вы можете избавиться от мерцания, добавив что-то вроде этого в начале вашего JavaScript или в вашего HTML:

if (previewMode) {
    document.documentElement.className = 'preview';
}

Тогда, если вы измените свои правила CSS, которые применяются к вашему режиму предварительного просмотра, чтобы отразить элемент HTML, имеющий class = "preview", в нечто вроде:

.preview table .defaultMode {
    display:none;
}

надеюсь, ваш стол должен отображаться правильно с первого раза, и его не нужно будет перерисовывать.