Question

我的CSS：

.loader1 {
    background-color: rgba(255, 255, 255, .8);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1000;
    height: 100%; 
    width: 100%;
    overflow: hidden;
    background-image: url(../Content/images/ezgif-1527767856.gif);
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

我的javascript：

function filterme() {
    $("#loader1").show();

    // in between I have a lot of code that takes time to run.
    $("#loader1").hide();
}

我的HTML：

<div class="loader1" id="loader1" style="display:none"></div>  
<button type="button" onclick="filterme()">Click ME</button>

单击该按钮可以正常运行javascript，但不会显示加载程序。

当我使用调试器并检查它时，显示加载程序。如何在非调试模式下显示它？

Answer 1

听起来这是一个线程问题。浏览器忙着运行你的CPU密集型，长时间运行的代码，它还没有完全更新页面上显示的内容，无论如何还要再次隐藏它。 / p>

所以，也许这就是：

function filterme() {
    $("#loader1").show();
    setTimeout(function() {
        //in between i have a huge code that takes time to run
        $("#loader1").hide();
    }, 10);
}

也就是说，在显示#loader1然后执行代码之间引入一个微小的延迟。这为浏览器提供了一个处理UI更新的时刻，然后一头扎进密集的东西。

作为aisde，请勿使用onclick=创建事件处理程序。在您的JavaScript中，执行：

$(document).ready(function() {
    $('button').click( filterme );
});

Answer 2

将你的功能放在document.ready function。

之外

加载程序在javascript运行时未显示但在调试时显示

2 个答案: