0

Не секрет, что браузеры пытаются оптимизировать отрисовку страницы и в общем случае это правильно.

Перед выполнением скрипта пытаюсь отобразить div через style.display = 'block', после выполнения скрипта (0.9-2.4с) убираю div через style.display = 'none', но операции с div съедаются оптимизатором браузера. Пробовал и с visibility, и с методами jQuery, но пока результата нет.

Как можно заставить браузер сделать моментальную отрисовку по требованию javascript?

2
  • Они съедаются, только если это происходит в одном потоке. Для принудительного repaint просто вызовите div.offsetWidth; или window.getComputedStyle(div, null);
    – RubaXa
    16 ноя 2013 в 9:05
  • отчасти сработало, ширину блока выдало правильно, но блок все-равно не отрисовался
    – kaf
    16 ноя 2013 в 9:30

3 ответа 3

1

Предполагаю, что код выглядел как-то так:

function runLongOperation() {
  // style.display = 'block'
  // ...долго работающий код
  // style.display = 'none'
}

Тогда должно сработать что-то такое:

// style.display = 'block'
setTimeout(function runLongOperation() {
  // ...долго работающий код
  // style.display = 'none'
}, 0);

PS. offsetWidth и getComputedStyle выполняют reflow/restyle, а не repaint (тут ссылки на подробности), API для принудительной перерисовки не существует.

0

Используй requestAnimationFrame(nameOfYourFunction) и передай имя функции как аргумент. Это функция говорит браузеру, что скрипт окончен и он может приступать к отрисовке DOM или ответам на запросы пользователя.

0

Можно сделать вот так:

if (true) { // здесь любое условие
   var styles      = document.createElement ("link");
       styles.rel  = "stylesheet";
       styles.href = "theme.css"
    document.body.appendChild (styles);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.