为了带来更好的用户体验,需要实现当请求一个长操作时,加载遮罩层,缓解等待焦虑感
于是先到这样的代码:
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/diagram/index"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.uniform.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.uniform.min.css" /> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css"> <script src="http://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script> </head> <body> <div id="example"> <button onclick="StartProcess()">Start Process</button> </div> <style> #example { 300px; height: 300px; background: #f00; } </style> <script> function StartProcess() { kendo.ui.progress($(document.body), true); LongProcess(5000); kendo.ui.progress($(document.body), false); } function LongProcess(milliseconds) { var startTime = new Date().getTime(); var endTime = startTime + milliseconds; while (endTime > new Date().getTime()) {}; } </script> </body> </html>
发现根本不起作用,
检查后,我注意到这是一个时间问题。
加载指示器没有足够的时间来初始化。因为漫长的过程开始得太快并且浏览器没有响应。我可以假设这与实际应用程序中发生的情况相似。
请确保在显示加载指示器后稍微执行保存进度,以便有足够的时间正确渲染:
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/diagram/index"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.uniform.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.uniform.min.css" /> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css"> <script src="http://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script> </head> <body> <div id="example"> <button onclick="StartProcess()">Start Process</button> </div> <style> #example { 300px; height: 300px; background: #f00; } </style> <script> function StartProcess() { kendo.ui.progress($(document.body), true); setTimeout(function(){ LongProcess(5000); kendo.ui.progress($(document.body), false); },100)//做个很小的时间差 } function LongProcess(milliseconds) {//长操作,可能是查询数据库,也可能是页面元素变动,我使用的是grid.autoFitColumns(); 列比较多 var startTime = new Date().getTime(); var endTime = startTime + milliseconds; while (endTime > new Date().getTime()) {}; } </script> </body> </html>
来自:https://www.telerik.com/forums/kendo-ui-progress