如何显示在jQuery加载微调？

在Prototype中，我可以用这个代码显示一个“loading …”图像：

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} ); function showLoad () { ... }

在jQuery中 ，我可以加载一个服务器页面到这个元素：

 $('#message').load('index.php?pg=ajaxFlashcard');

但是如何像我在Prototype中那样附加一个加载微调器到这个命令？

有几种方法。我的首选方法是将一个函数附加到元素本身的ajaxStart / Stop事件。

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

每当执行任何Ajax调用时，ajaxStart / Stop函数都会触发。

更新：从jQuery 1.8开始，文档指出.ajaxStart/Stop应该只附加到document 。这将把上面的代码片段转换为：

 var $loading = $('#loadingDiv').hide(); $(document) .ajaxStart(function () { $loading.show(); }) .ajaxStop(function () { $loading.hide(); });

对于jQuery我使用

 jQuery.ajaxSetup({ beforeSend: function() { $('#loader').show(); }, complete: function(){ $('#loader').hide(); }, success: function() {} });

你可以使用JQuery的Ajax函数，并使用它的选项beforeSend，并定义一些函数，在其中你可以显示一些像加载器div和成功的选项，你可以隐藏这个loader div在这里一些代码，让你明白：

 jQuery.ajax({ type: "POST", url: 'YOU_URL_TO_WHICH_DATA_SEND', data:'YOUR_DATA_TO_SEND', beforeSend: function(){ $("#loaderDiv").show(); }, success: function(data) { $("#loaderDiv").hide(); } });

希望有助于在这个loader div你可以有任何Spinning Gif图像在这里是一个网站，是一个伟大的Ajax加载程序生成器根据您的配色scheme： http : //ajaxload.info/

您可以在AJAX调用之前将animation图像插入到DOM中，然后执行内联函数将其删除。

 $("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />'); $('#message').load('index.php?pg=ajaxFlashcard', null, function() { $("#myDiv").html(''); });

这将确保您的animation在后续请求的相同框架上开始（如果有的话）。请注意，旧版本的IE浏览器可能会遇到困难。

祝你好运！

 $('#message').load('index.php?pg=ajaxFlashcard', null, showResponse); showLoad(); function showResponse() { hideLoad(); ... }

http://docs.jquery.com/Ajax/load#urldatacallback

如果你使用$.ajax()你可以使用这样的东西：

 $.ajax({ url: "destination url", success: sdialog, error: edialog, // shows the loader element before sending. beforeSend: function () { $("#imgSpinner1").show(); }, // hides the loader after completion of request, whether successfull or failor. complete: function () { $("#imgSpinner1").hide(); }, type: 'POST', dataType: 'json' });

使用加载插件： http ： //plugins.jquery.com/project/loading

 $.loading.onAjax({img:'loading.gif'});

变体：我在主页面的左上angular有一个id =“logo”的图标; 当ajax正在工作时，一个微调器gif然后被覆盖在顶部（具有透明度）。

 jQuery.ajaxSetup({ beforeSend: function() { $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat') }, complete: function(){ $('#logo').css('background', 'none') }, success: function() {} });

最后我对原来的答复做了两处修改。

从jQuery 1.8开始，ajaxStart和ajaxStop只能附加到document 。这使得只过滤一些ajax请求变得困难。秀…
切换到ajaxSend和ajaxComplete使得在显示微调器之前可以对当前的ajax请求进行处理。

这是这些更改后的代码：

 $(document) .hide() // hide it initially .ajaxSend(function(event, jqxhr, settings) { if (settings.url !== "ajax/request.php") return; $(".spinner").show(); }) .ajaxComplete(function(event, jqxhr, settings) { if (settings.url !== "ajax/request.php") return; $(".spinner").hide(); })

您可以简单地将加载程序映像分配给您稍后将使用Ajax调用加载内容的相同标记：

 $("#message").html('<span>Loading...</span>'); $('#message').load('index.php?pg=ajaxFlashcard');

您也可以用图像标签replacespan标签。

除了设置ajax事件的全局默认值外，还可以为特定元素设置行为。也许只是改变他们的class级就足够了？

 $('#myForm').ajaxSend( function() { $(this).addClass('loading'); }); $('#myForm').ajaxComplete( function(){ $(this).removeClass('loading'); });

示例CSS，用微调器隐藏#myForm：

 .loading { display: block; background: url(spinner.gif) no-repeat center middle; width: 124px; height: 124px; margin: 0 auto; } /* Hide all the children of the 'loading' element */ .loading * { display: none; }

我也想为这个答案做出贡献。我正在寻找类似的jQuery，这是我最终结束了使用。

我从http://ajaxload.info/获得了我的加载微调器。; 我的解决scheme是基于这个简单的答案http://christierney.com/2011/03/23/global-ajax-loading-spinners/ 。

基本上你的HTML标记和CSS将如下所示：

 <style> #ajaxSpinnerImage { display: none; } </style> <div id="ajaxSpinnerContainer"> <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." /> </div>

然后你为jQuery编写代码如下所示：

 <script> $(document).ready(function () { $(document) .ajaxStart(function () { $("#ajaxSpinnerImage").show(); }) .ajaxStop(function () { $("#ajaxSpinnerImage").hide(); }); var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID"; $.getJSON(owmAPI) .done(function (data) { alert(data.coord.lon); }) .fail(function () { alert('error'); }); }); </script>

它是如此简单：）

 $('#loading-image').html('<img src="http://img.dovov.comajax-loader.gif"> Sending...'); $.ajax({ url: uri, cache: false, success: function(){ $('#loading-image').html(''); }, error: function(jqXHR, textStatus, errorThrown) { var text = "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept"; $('#loading-image').html('<span style="color:red">'+text +' </span>'); } });

我用jQuery UI对话框使用了以下内容。（也许它与其他Ajaxcallback？）

 $('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({ height: 300, width: 600, title: 'Wait for it...' });

包含一个animation加载gif，直到它的内容被replace，当ajax调用完成。

JavaScript的

 $.listen('click', '#captcha', function() { $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />'); $.get("/captcha/new", null, function(data) { $('#captcha-block').html(data); }); return false; });

CSS

 #loading { background: url(/image/loading.gif) no-repeat center; }

请注意，你必须使用asynchronous调用spinners工作（至less这是什么导致我的不显示，直到ajax调用，然后迅速消失，因为调用完成并删除微调）。

 $.ajax({ url: requestUrl, data: data, dataType: 'JSON', processData: false, type: requestMethod, async: true, <<<<<<------ set async to true accepts: 'application/json', contentType: 'application/json', success: function (restResponse) { // something here }, error: function (restResponse) { // something here } });

我这样做：

 var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>'; $('#detail_thumbnails').html(preloaderdiv); $.ajax({ async:true, url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'), success:function(data){ $('#detail_thumbnails').html(data); } });

我想你是对的。这个方法太全球化了…

但是，当您的AJAX调用对页面本身没有影响时，这是一个很好的默认设置。（例如保存背景）。（你可以通过传递“global”来closures某个Ajax调用：false – 请参阅jquery的文档

当AJAX调用是为了刷新页面的一部分，我喜欢我的“加载”图像是特定于刷新部分。我想看看哪一部分刷新了。

想象一下，如果你能简单地写下如下内容，那将是多么的酷：

 $("#component_to_refresh").ajax( { ... } );

这将显示此部分的“加载”。下面是我写的处理“加载”显示的函数，但它是特定于您在ajax中刷新的区域。

首先，让我告诉你如何使用它

 <!-- assume you have this HTML and you would like to refresh it / load the content with ajax --> <span id="email" name="name" class="ajax-loading"> </span> <!-- then you have the following javascript --> $(document).ready(function(){ $("#email").ajax({'url':"/my/url", load:true, global:false}); })

这是function – 一个基本的开始，你可以提高你想要的。这是非常灵活的。

 jQuery.fn.ajax = function(options) { var $this = $(this); debugger; function invokeFunc(func, arguments) { if ( typeof(func) == "function") { func( arguments ) ; } } function _think( obj, think ) { if ( think ) { obj.html('<div class="loading" style="background: url(/publichttp://img.dovov.comloading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>'); } else { obj.find(".loading").hide(); } } function makeMeThink( think ) { if ( $this.is(".ajax-loading") ) { _think($this,think); } else { _think($this, think); } } options = $.extend({}, options); // make options not null - ridiculous, but still. // read more about ajax events var newoptions = $.extend({ beforeSend: function() { invokeFunc(options.beforeSend, null); makeMeThink(true); }, complete: function() { invokeFunc(options.complete); makeMeThink(false); }, success:function(result) { invokeFunc(options.success); if ( options.load ) { $this.html(result); } } }, options); $.ajax(newoptions); };

这对我来说是最好的方式：

jQuery ：

 $(document).ajaxStart(function() { $(".loading").show(); }); $(document).ajaxStop(function() { $(".loading").hide(); });

咖啡：

  $(document).ajaxStart -> $(".loading").show() $(document).ajaxStop -> $(".loading").hide()

文档： ajaxStart ， ajaxStop

如果你不想写自己的代码，也有很多插件可以做到这一点：

如果您计划在每次发出服务器请求时都使用加载程序，则可以使用以下模式。

  jTarget.ajaxloader(); // (re)start the loader $.post('/libs/jajaxloader/demo/service/service.php', function (content) { jTarget.append(content); // or do something with the content }) .always(function () { jTarget.ajaxloader("stop"); });

这个代码特别使用了jajaxloader插件（我刚刚创build）

https://github.com/lingtalfi/JAjaxLoader/

这是一个非常简单和智能的插件，具体目的是： https ： //github.com/hekigan/isloading

你总是可以使用Block UI jQuery插件，它可以为你做所有事情，甚至可以在加载ajax的时候阻止任何input的页面。如果插件似乎没有工作，你可以阅读正确的方式来使用它在这个答案。一探究竟。

如何显示在jQuery加载微调？

JavaScript的

CSS

在Python类中支持等价（“平等”）的优雅方式

你将如何做相当于Python中的预处理器指令？