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

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

0 个答案: