jquery 加载器在JavaScript运行时不显示，但在调试时显示

apeeds0o 于 5个月前发布在 jQuery

关注(0)|答案(3)|浏览(62)

我的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，但是加载器没有显示出来。
当我使用调试器并检查它时，加载器会显示出来。我如何使它在非调试模式下可见？

jquery

来源：https://stackoverflow.com/questions/38766490/loader-not-shown-when-javascript-is-running-but-is-shown-when-debugging

3条答案

按热度按时间

w80xi6nr1#

这听起来像是一个线程问题。浏览器是如此忙碌运行你的CPU密集型，长时间运行的代码，它不太抽出时间来更新页面上的可见内容之前，它的时间来再次隐藏它。
所以，也许这个：

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

字符串
也就是说，在显示#loader1和执行代码之间引入一个微小的延迟。这给了浏览器一个时间来处理UI更新，然后再一头扎进密集的东西。
另外，不要使用onclick=来创建事件处理程序。在您的JavaScript中，请执行以下操作：

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

型

赞(0）回复(0）举报 5个月前

wtzytmuj2#

现在已经很晚了，但是如果有人有同样的问题，你可以使用Ajax和javascript：false，并显示加载器：

$.ajax({
    async: false,
    type: "POST",
    beforeSend: function () {
        $(".loader").css("display", "table");
    },
    success: function (data) {
    },
});

字符串
只需在beforeSend事件中设置加载器的调用函数。

赞(0）回复(0）举报 5个月前

lsmepo6l3#

把你的函数放在document.ready函数之外。

赞(0）回复(0）举报 5个月前