前端实现加载完毕之前loading提示效果

妖狐艹你老母 2024-04-08 10:12 64阅读 0赞

### 1：按钮控制自动加载和取消模拟方法 ###

### 2：通过定时3秒后自动取消加载 ###

### 3：文字加载动态效果 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>按钮方法</title>
        <meta charset="utf-8"/>
        <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
    </head>
    <style>
        #pageloading {
          
            position: fixed;
            _position: absolute;
            top: 40%;
            right: 50%;
            width: 20%;
            text-align: center;
            z-index: 999;
        }
    </style>
    <body>
    
    <div style="border: 1px solid red;">
        <input id="start" value="开始加载" type="button" onclick="start()">
        <input id="start" value="停止加载" type="button" onclick="stop()">
    
    </div>
    <div id="pageloading" style="display: none" ><p>数据加载中<span class="id_loaddian"></span></p></div>
    </body>
    <script>
    
        var dian=0;
        var  t;//定义定时器id
        function start() {
          
            id_loaddian();
            $("#pageloading").attr("style","display: block")
            function id_loaddian(){
          
                t=setTimeout(function() {
          
                    if (dian>=3){
          
                        $('.id_loaddian').text('');
                        dian=0;
                    }else{
          
                        dian++;
                        $('.id_loaddian').text($('.id_loaddian').text()+' ●');
                    }
                    id_loaddian();
                }, 500);
            }
        }
    
        function stop() {
          
            clearTimeout(t);//关闭定时器
            $("#pageloading").attr("style","display: none");
    
        }
    </script>
    </html>

### 4：知识补充 ###

> $(“\#demo”).attr(“style”,“pointer-events: none;”);禁用所用操作事件  
> $(“\#demo”).attr(“style”,“pointer-events: anto;”);操作事件默认

### 5：原生js加载等待框loading动画 ###