javascript - jquery在JS运行时加载微调器或加载消息

Question

有没有办法在我的 javascript 运行时显示加载微调器？

我想在页面等待时向用户展示一些东西.....

这大约需要 5-6 秒..所以我想在等待时展示一个微调器或盒子

$.each(ARRAY, function(key, item){
                            //IM DOING SOME LOGIC HERE
                        });

Answer 1

在您的页面中添加一个隐藏的加载图像，在您启动功能时显示它，并在功能完成时再次隐藏它。

<img src="loading image " id="loading">


function(){
  $("#loading").show();
  your logic
  $("#loading").hide();
}

Answer 2

这只是想到的第一件事。可能不是最好的解决方案。但它可以完成这项工作。你可以定义一个加载 div 并默认隐藏它。然后，当每个人都在做自己的事情时，显示正在加载的 div。所以像：

CSS：

   .hidden{display:none;}

HTML：

      <div class="loading hidden"></div>

JavaScript：

           function(){
               $('.loading').removeClass('hidden'); 
               $.each(ARRAY, function(key, item){

                    });
            }

Answer 3

这可能有助于 AJAX 逻辑：

<img id="loadingImg" src="loding.gif"/>

$('#loadingImg')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ajaxStart/ajaxStop 函数将在您执行任何 AJAX 调用并显示加载微调器时触发。

或者，这也可能有帮助：

function doLogic() {
    $('#loadingImg').show();

    setTimeout(function() { // allow spinner to load before work starts
        // logic here
    },500);

    $('#loadingImg').hide();
}