javascript 显示加载面板，无需 ajax 调用或服务调用

Question

我想在 javascript 函数本身中显示加载微调器。没有 setTimeout 我有负载微调器。谁能帮我解决一下

//show progress bar   
$('.ajax-loading').show();

//very long loop or short loop
  for(i=0;i<n;i++){
   ------
 }
// hide progress bar
$('.ajax-loading').hide();

Answer 1

你不能。如果你尝试这样做，那么用户体验会很糟糕。 JavaScript 不会以这种方式工作，因为长时间运行的 JavaScript 同步作业会阻塞浏览器的 UI(Ui 上的所有内容)，包括图像动画。

坏消息是大多数浏览器崩溃都是由严重的问题引起的构造 JavaScript 循环。

这就是为什么在循环执行期间不会显示加载图像的原因。

Here is the fiddle

HTML:

<button class="k-button" id="progressStartButton" >Loading Start ......</button>
<div id="tabStripCompany">
                <ul>
                    <li class="k-state-active">Loading Example</li>

                </ul>
                <!-- Settings tab -->
                <div id="settingsTab" >
                    <div id="customerSettingsLoading" ></div>
                    <div id="customerSettings">


                    </div>
                </div>
                <div >
                    More stuff here...
                </div>
            </div>

JavaScript:

kendo.ui.progress($("#customerSettings"), true);
setInterval(function(){
         kendo.ui.progress($("#customerSettings"), false);
    $("#progressStartButton").text("Loading End !")
}, 3000)

$("#tabStripCompany").kendoTabStrip();

CSS:

#customerSettings {
    position: relative;
}
#customerSettings{height:200px}