Question

关于javascript，我还很新，但我遇到的问题似乎太简单了，但给我带来了麻烦。我有一个链接，我想实现这一点，当我单击该链接时，将出现一个不可见的页面加载器，然后我希望页面加载器在确定的时间后消失，最后它进入链接的URL。重要的是它必须在页面上发生，我不希望div在加载时显示。

我尝试了一些额外的脚本“ setTimeout”，“ prevent”，以在一段时间后隐藏加载程序，但是它不起作用……只要页面加载完成，它就会消失。到目前为止，这是我最清楚的一点。

    <a class="#" href="#" onclick="javascript:document.getElementById('page-loader').style.display='block';"></a>

#page-loader {
    position: absolute;
    top: 0;
    bottom: 0%;
    left: 0;
    right: 0%;
    z-index: 10000;
    display: none;
    text-align: center;
    width: 100%;
    padding-top: 250px;
    background-color: black; 
}

我希望你能帮我这个忙

Answer 1

您已步入正轨！单击链接时，您需要显示loader div。您已经定义了CSS，只需要修改display值即可显示它（通过style.display或应用另一个覆盖class的{{1}}）。

使用display: none，然后可以定义一个回调以隐藏div并导航。

这是一个示例（一秒后隐藏加载程序，然后半秒后导航）：

setTimeout

// Bind our our click event listener
document.querySelector('a').addEventListener('click', function (e) {

    // Calling preventDefault will prevent the browser from navigating (prevents the default behavior)
    e.preventDefault();

    // Our defined link, where we want to navigate to
    const destination = this.getAttribute('href');

    // Our loader div - we'll set to a const to reference later
    const loader = document.querySelector('#page-loader');

    // On click, we immediately want to show our loading div.
    // For this demo, we'll use style.display to override our CSS
    loader.style.display = 'block';
    
    // Set Timeout - We've defined a 1 second delay
    setTimeout(function () {

        // After 1 second, we want to hide the loader. Again, using style, we set to 'none'
        loader.style.display = 'none';

        // One additional set timeout - this allows the browser time to hide the loader. I've defined a half second
        setTimeout(function () {

              // This will set the URL to our href
              window.location.href = destination;
        }, 500);
    }, 1000);
})

#page-loader {
    position: absolute;
    top: 0;
    bottom: 0%;
    left: 0;
    right: 0%;
    z-index: 10000;
    display: none;
    text-align: center;
    width: 100%;
    padding-top: 250px;
    background-color: black; 
}

一个建议：我将避免使用<div id="page-loader">Loading</div> <a href="https://www.google.com">Google</a>作为避免导航的一种方式。调用href="#"以防止浏览器立即导航到目的地。这样，如果JavaScript被禁用/阻止或损坏，则该链接仍将起作用。

学习愉快！

Answer 2

尝试一下

const nav = () => {
var loader = document.getElementById('loader');
loader.style.display='block';
setTimeout(()=>loader.style.display = 'none', 3000);
}

#loader{
display: none;
}

<div id='loader'>Loading...</div>
<a href='#' onClick='nav()'>Change</a>

Answer 3

尝试

<script>
document.getElementById("page-loader").addEventListener("click", function(event){
  event.preventDefault();
  document.getElementById("page-loader").style.display='block';

});
<script>

单击链接以显示页面加载器，然后使页面加载器在定义的时间（显示目标的网址）后消失

3 个答案: