php - 显示预加载器图标 - 直到页面完全加载

Question

如何在页面完全加载之前显示预加载器 - 而不是我拥有的？

我在页面顶部有 6 个按钮。每个按钮加载相同的页面，但具有绑定到检索数据的 sql 脚本的不同变量。此脚本需要几秒钟才能运行并显示信息。

<div>
  <a href="page.php?t=1" class="button">button 1</a>
  <a href="page.php?t=2" class="button">button 2</a>
  <a href="page.php?t=3" class="button">button 3</a>
  <a href="page.php?t=4" class="button">button 4</a>
  <a href="page.php?t=5" class="button">button 5</a>
  <a href="page.php?t=6" class="button">button 6</a>
</div>

<div class="load"></div> <!-- display preloader icon -->

我有以下 jquery 显示预加载器图标，该图标将在 20 秒内消失，但我真的希望它在脚本完成时消失，数据已显示，页面已完全加载。

它有效，但它是 klugee - 我认为更好的解决方案是让它消失而没有 20 秒的延迟。

<script>
    $('.button').click(function(){
        $('.load').addClass('loading');
        setTimeout(function () { 
           $('.load').removeClass('loading');
        }, 20000);
    });
</script>

这是相对的CSS...

.loading {
    background: #EEE;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 200px;
    padding: 10px;
    font-weight: bold;
    font-family: 'Montserrat', Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    background-image: url('images/preloader.svg');
    background-repeat: no-repeat;
    background-size: 28px 32px;
}

.loading:after {
    content: "Loading data...";
    color: #CC0000;
    text-align: right;
    padding-left: 15px;
}

标签： phpjqueryajax