装载机但调试

我的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很好，但加载程序没有显示。

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

来源

2016-08-04 Himaan Singh

loader1是类名吗？那么你需要使用'$（'。loader'）'而不是'（“＃loader1”）'。 “＃”用于'id' –

我用你的代码做了一个jsfiddle并对它进行了一些修改，这对我有用：https://jsfiddle.net/9Lbojrfm/1/ –

你使用的是什么调试器？你的意思是说，当你的浏览器的控制台处于打开状态或者某个网页开发扩展正在运行时，它是有效的？ – moopet

听起来像这是一个线程问题。浏览器忙于运行你的CPU密集型，长时间运行的代码，它无法在页面上看到更新内容，然后再隐藏它。

所以，也许这样的：

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); 
});

来源

2016-08-04 12:01:54 VoteyDisciple

-1

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

来源

2016-08-04 11:56:27

请解释这将如何帮助。 – moopet

装载机但调试

回答

相关问题