• 跳转到新页面,加载过程中加入等待过渡的动态效果


    由于数据量庞大后台查数据的操作的时候慢从而导致页面加载速度过慢,所以会到用loading效果来过渡,让用户感觉上不是很慢。下面是效果图

     这里使用的是layer组件进行的快速实现,layer的CDN各个地址:https://www.bootcdn.cn/layer/

    实现步骤:

    1. 引入layer.js,如果追求极致性能的可以把js下载下来,引用本地的文件

    <script src="https://cdn.bootcss.com/layer/2.3/layer.js" ></script>

    2. 定义对应的loading方法方便调用

    function loading(msg) {
        layer.msg(msg, {
            icon: 16,
            shade: [0.6, '#000005'],//遮罩的颜色与透明度
            time: false  //取消自动关闭
        })
    };

     3.发送请求之前调用loading方法,调用完毕后关闭加载

    $.ajax({
            url:"/login/login",
            method:"post",
            data:
            {
                username : $("#form-username").val(),
                password : transfAuth($("#form-password"))
            },
            beforeSend : function(){
                loading("加载中");
            },
            success:function()
            {
                 layer.closeAll();
            },
            error:function()
            {
                 layer.closeAll();
            }
        });

     原文出处:跳转链接->

  • 相关阅读:
    测试策略(1)
    css在网页中的一些重要运用
    拖拽禁止点击事件
    js入门的心结
    响应式布局
    web中的兼容性
    css中的bfc和ifc
    css格式化的基本运用
    css基础知识
    html中输入控件的元素
  • 原文地址:https://www.cnblogs.com/4AMLJW/p/taiozhuangjiazaiguocheng20200817170000.html
Copyright © 2020-2023  润新知