用户等待 显示加载中样式

有的时候，我们在请求后台执行任务的时候。需要用户等待后台处理，如果没提示的时候，会给用户体验很差的感觉，几年介绍一个jquery的一个插件。

官网：http://spin.js.org

完整的例子：

html:

1 <!--loading-->
2 <div id='foo'></div>
3 <div id='xx'></div>

 js:通过click事件，经过ajax请求，请求到后台。在这段时间内显示我们请求中的样式：

 1 <script src="/static/trouble_run/js/spin.min.js"></script>
 2 function troub_stop(){
 3      var task_id='{{task_id}}';
 4      var opts = {
 5                 lines: 9, // The number of lines to draw
 6                 length: 0, // The length of each line
 7                 width: 20, // The line thickness
 8                 radius: 25, // The radius of the inner circle
 9                 corners: 1, // Corner roundness (0..1)
10                 rotate: 0, // The rotation offset
11                 color: '#FF4500', // #rgb or #rrggbb
12                 speed: 1, // Rounds per second
13                 trail: 60, // Afterglow percentage
14                 shadow: false, // Whether to render a shadow
15                 hwaccel: false, // Whether to use hardware acceleration
16                 className: 'spinner', // The CSS class to assign to the spinner
17                 zIndex: 2e9, // The z-index (defaults to 2000000000)
18                 top: '25%', // Top position relative to parent in px
19                 left: '50%' // Left position relative to parent in px
20             };
21      $("#xx").css("display","block");
22      var target = document.getElementById('foo');
23      var spinner = new Spinner(opts).spin(target);
24      $.ajax(
25            {
26            url:'/close_trouble/',
27            type:'POST',
28            dataType:'json',
29            data:{'task_id':task_id},
30            success:function(callback){
31                     console.log(callback) 
32                    if (callback['status']){
33                        void 0
34                        }else{
35                             $("#xx").css("display","none");
36                             spinner.spin();
37                            $('#myModal').modal('show');
38                           $('.modal-body label').text(callback['msg']) 
39                             }
40               }
41             }
42 
43            )  
44 
45 
46 
47       }

 效果：

其中我们通过：

 1      var opts = {
 2                 lines: 9, // The number of lines to draw
 3                 length: 0, // The length of each line
 4                 width: 20, // The line thickness
 5                 radius: 25, // The radius of the inner circle
 6                 corners: 1, // Corner roundness (0..1)
 7                 rotate: 0, // The rotation offset
 8                 color: '#FF4500', // #rgb or #rrggbb
 9                 speed: 1, // Rounds per second
10                 trail: 60, // Afterglow percentage
11                 shadow: false, // Whether to render a shadow
12                 hwaccel: false, // Whether to use hardware acceleration
13                 className: 'spinner', // The CSS class to assign to the spinner
14                 zIndex: 2e9, // The z-index (defaults to 2000000000)
15                 top: '25%', // Top position relative to parent in px
16                 left: '50%' // Left position relative to parent in px
17             };

 

来定义 我们显示的加载图样的样式。

其中我们定义了遮罩层：

 1 #xx{
 2     display: none;
 3     height: 100%;
 4     width: 100%;
 5     position: fixed;
 6     *position: absolute;
 7     *height: 1380px;
 8     background: black;
 9     top:0;
10     left: 0;
11     opacity:0.4;
12     }

 

 然后通过：

1      $("#xx").css("display","block");
2      var target = document.getElementById('foo');
3      var spinner = new Spinner(opts).spin(target);

 

显示遮罩层和加载中图样。当后端请求到数据之后，我们去掉遮罩层和加载样式：

1 $("#xx").css("display","none");
2 spinner.spin();

 

这样就可以自定义我们的加载样式。很简单！

 

posted @ 2017-06-27 17:46  evil_liu  阅读(804)  评论(0)  编辑  收藏  举报