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

最新推荐文章于 2024-08-20 02:18:10 发布

小徐敲java

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量2.1k

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/qq_19891197/article/details/126431339

版权

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

<!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%;
        padding: 2px;
        text-align: center;
        /*background: #c44;*/
        color: #fff;
        z-index: 999;
    }
</style>
<body>
<!-- logo/工具 -->
<div style="border: 1px solid red;">
    <input id="start" value="开始" type="button" onclick="start()">
    <button id="stop" onclick="stop()">停止</button>
</div>
<div id="pageloading" style="display: none" ><img src="动态加载图片路径"/></div>
</body>
<script>
    function start() {
        $("#pageloading").attr("style","display:block;");
    }

    $("#stop").click(function () {
        $("#pageloading").attr("style","display:none;");
    })

</script>
</html>

2：通过定时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%;
        padding: 2px;
        text-align: center;
        /*background: #c44;*/
        color: #fff;
        z-index: 999;
    }
</style>
<body>
<!-- logo/工具 -->
<div style="border: 1px solid red;">
    <input id="start" value="定时加载" type="button" onclick="start()">

</div>
<div id="pageloading" style="display: none" ><img src="动态加载图片路径"/></div>
</body>
<script>

    function start() {
        $("#pageloading").attr("style","display:block;");
        setTimeout(' $("#pageloading").attr("style","display:none;")',3000)
    }


</script>
</html>

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>
<!-- logo/工具 -->
<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;”);操作事件默认

<script>

//一.标签的隐藏和显示方法
$("#id").show()    //表示display:block, 
$("#id").hide()      //表示display:none;

$("#demo").attr("style","display:none;");  //隐藏div
$("#demo").attr("style","display:block;");  //显示div

$("#demo").css("display","none");    //隐藏div
$("#demo").css("display","block");    //显示div

//二.jquery判断元素是否隐藏
var display =$('#id').css('display');
if(display == 'none'){
   alert("隐藏的！");
}

//三.添加和删除标签class
$("#demo").addClass("btn");    //添加class
$("#demo").removeClass("btn");    //删除class


</script>

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/shiyueGG/pxmu@1.0.6/pxmu.min.js"></script>
<script>
//弹出加载框
pxmu.loading('正在加载');

//弹出提示框
pxmu.toast({
    msg: '操作成功', //内容 不能为空
    time: 2500, //停留时间 默认2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
    color: '#fff', //文字颜色 默认白色
});
</script>