时间戳

首页 > 解决方案 > CSS 视觉渲染在 JS 脚本完成之前不显示

javascript - CSS 视觉渲染在 JS 脚本完成之前不显示

问题描述

我有一个在点击事件上触发的 JS 函数。在函数的第一行，我向 html 元素添加了一个类。html 是一个自定义加载器，该类只是使加载器可见。

问题是加载程序在脚本实际执行完成之前不会出现。脚本启动后立即在元素上设置该类，但在脚本完成执行之前，我的浏览器中没有任何视觉上发生。

$('body').on('click', '#button', function(){ 
    $('#loader').addClass('active');

    $('.fields').each(function(i, el){
       // does some intensive stuff, including appending elements to a dom fragment, triggering events programmatically. This takes 5-10s to execute.
    });

    // the loader only appears visible in the browser once the code executed in the loop finishes.
});

活动类中的 CSS 是：

.active{
    z-index: 9999;
    display: block;
    position: absolute;
    left: 40%;
    left: calc(50% - 18px);
    left: -webkit-calc(50% - 18px);
    top: 40%;
}

我试着重新搜索这个问题，但我在谷歌上找不到任何东西。也许是因为我不知道我应该搜索什么关键字，我不确定是什么原因导致或如何参考这个问题。

所以，伙计们，你们是我最后的希望。你能指出我如何调试或导致这种情况的正确方向吗？

setTimeout如果我在超时时间为 0 的函数中添加字段循环，它就可以工作。但我们的想法是以正确的方式修复它，并理解为什么它没有按预期工作。

标签： javascriptjquerycss

解决方案

如果我在具有 0 超时的 setTimeout 函数中添加字段循环，则它可以工作。

这是一种明智的方法，尽管requestAnimationFrame在风格上稍微好一些。

但我们的想法是以正确的方式修复它，并理解为什么它没有按预期工作。

在函数完成运行之前，浏览器不会触发重绘 - 否则，它将为每个单独的 DOM 修改进行重绘，这将是昂贵的。

推荐阅读