伪装进度条的实现

最新推荐文章于 2023-10-26 13:47:20 发布

Rage Dream

最新推荐文章于 2023-10-26 13:47:20 发布

阅读量658

点赞数

CC 4.0 BY-SA版权

分类专栏：工作常见问题

本文链接：https://blog.youkuaiyun.com/qq_35156166/article/details/83037674

工作常见问题专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个在更新、上传、删除操作期间阻止用户进行其他交互的加载遮罩实现方案。使用了CSS样式定义遮罩外观，并通过JS控制其显示与隐藏。此方案利用动态图片作为进度指示，增强了用户体验。

应用场景
更新，上传，删除时，不能进行其他操作

  		div.loadingex {
  			width: 100%;
  			height: 80%;
  			margin: 0;
  			padding: 0;
  			position: absolute;
  			background-image: url(../images/loading.gif);
  			background-repeat: no-repeat;
  			background-position: 50% 38%;
  			z-index: 900;
  		}

前端

<div>
    <div class="loadingex" dojoAttachPoint="loading" style="width: 98%;display: none;"></div>
    <div></div>
</div>

 beOnLoading:function(flag){   // div显示和隐藏 true为显示
        if(flag){
            dojo.style(this.loading,"display","block");
            return;
        }
        dojo.style(this.loading,"display","none");
    },
    //前台显示进度条 用js控制