JS addClass () ошибка uirepaint / рендеринга - PullRequest
Новая
       35

JS addClass () ошибка uirepaint / рендеринга

2 голосов
/ 09 июля 2020

У меня есть код JS, выполнение которого занимает некоторое время, поэтому я хотел показать загрузчик, пока код не будет выполнен. То, что я сделал до сих пор, похоже на 

$(".loader-block").addClass("show");
// simulate a 5 second delay
setTimeout(() => { $(".loader-block").removeClass("show"); }, 5000);
.loader-block {
    width: 417px;
    height: 100%;
    background: #eee;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 9;
}

.loader-block.show {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="loader-block">
   <img src="/img/new-loader.gif" alt="Goodness never stops to wait for you">
</div>

JS КОД 

$(".loader-block").addClass("show");
......
.... Some JS Code
......
$(".loader-block").removeClass("show");

HTML

<div class="loader-block">
   <img src="/img/new-loader.gif">
</div>

CSS

.loader-block {
    width: 417px;
    height: 100%;
    background: #eee;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 9;
}

.loader-block.show {
    display: block;
}

Я подтвердил, что класс применен к элементу и удаляется после выполнения, но display:block css (который находится в классе show) не отражается, а класс show применяется. Короче говоря, я чувствую, что это связано с перерисовкой пользовательского интерфейса. Мы будем очень благодарны за любые предложения.

Я даже проверил применение display:block css непосредственно к элементу, я вижу, что css применяется, но результат не отображается.

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Я получил решение с помощью комментария @CBroe. Я хотел бы опубликовать причину и решение, чтобы другие могли получить от этого помощь. Как упоминалось в комментарии,

Ваш код JS работает от начала до конца sh, и только после этого управление возвращается механизму рендеринга.

код между addClass() и removeClass() выполнялся непрерывно, и только после этого обновлялись стили. Таким образом, добавление прерывания решило мою проблему.

СТАРЫЙ КОД: 

$(".loader-block").addClass("show");
......
.... Some JS Code
......
$(".loader-block").removeClass("show");

НОВЫЙ КОД: 

$(".loader-block").addClass("show");
setTimeout(() => {
     ......
     .... Some JS Code
     ......
     $(".loader-block").removeClass("show");
}, 5);

Спасибо за поддержку.

0 голосов
/ 09 июля 2020

Хотя комментарии к вопросу решают проблему, реальным методом было бы отправить событие после выполнения вашего JS и иметь обработчик событий, который может удалить счетчик.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

...