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 that you have read and understand our privacy policy and code of conduct.

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