jquery在JS运行时加载旋转器或加载消息

Question

在我的javascript运行时，是否有一种方式显示加载自旋器？

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

这是大约5-6 secs..so，我想在它等待的时候显示一个旋转器或盒子。

$.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();
    })
;

每当您执行任何AJAX调用时，ajaxStart/ajaxStop函数都会触发，并显示加载旋转器。

或者，这也可能有帮助：

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

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

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