显示加载GIF，等待Ajax响应

本文介绍了显示加载GIF，等待Ajax响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个座位图。当我点击一个座位，我想说明一个加载GIF。座位图表来自SVG文件。座位SVG元素。当Ajax响应回来后，我想隐藏加载GIF。我写了code以下，但它不工作。

＆lt;节＆GT;     ＆LT; D​​IV CLASS =父母的风格=文本对齐：中心;＆GT;         ＆LT; D​​IV CLASS =panzoom的风格=宽度：500px的;高度：375px;＆GT;         ＆LT; D​​IV CLASS =装的风格=显示：无ID =加载＆GT;＆LT; IMG SRC =../../脚本/ spinner.jpg的风格=宽度：200像素;填充左：为175px;/＆GT;＆LT; / DIV＆GT;         ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =分隔符＆GT;＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =按钮的风格=文本对齐：中心;＆GT;         ＆LT;输入类型=范围级=缩放范围＆GT;         ＆LT;一类=键复位＆GT;Sıfırla＆LT; / A＆GT;    ＆LT; / DIV＆GT;     ＆LT;脚本＆GT;             $（函数（）{             变量$节= $（'部分'）第（）。             $ section.find（。panzoom）。SVG（{                 使用loadURL：resources-biletino.s3.amazonaws/content/venue/17/seatChart-01.svg的onLoad：函数（）{                     initAll（）;                 }             }）;             $ section.find（。panzoom）。panzoom（{                 $ zoomRange：$ section.find（变焦范围。）                 $复位：$ section.find，（复位。）                 光标：自动，                 增加：0.6             }）;         }）;         功能seatObject（ID，标签，状​​态，令牌）{              this.id = ID;              this.label =标签;              this.status =状态;              this.token =令牌;         }         变种座椅= [];         传播initAll（）{             $（seatObj）。每个（函数（）{                 VAR ID = $（本）.attr（ID）;                 变种临时=新seatObject（＃+编号标签+ ID，可用，）;                 席[ID] =温度;                 $（本）。点击（函数（）{                 VAR currentSeat = $（本）.attr（ID）;                 $（＃加载）显示（）。                     如果（席[currentSeat] .STATUS ==选择）                     {                         dequeueSeat（currentSeat）;                     }                     其他                     {                         enqueueSeat（currentSeat）;                         //alert($(this).attr("inkscape:label））;                     }                 }）;             }）;             $阿贾克斯（{                 键入：GET，                 网址：@ Url.Action（GetFullSeats，事件），                 数据：{layoutID：@ Model.LayoutID}，                 数据类型：JSON，                 成功：函数（结果）                 {                     VAR uintArray = Base64Binary.de code（结果）;                     对于（VAR I = uintArray.length - 1; I＆GT; = 0;我 - ）                     {                         如果（uintArray [I] 0）                         {                             对于（VAR J = 0; J＆LT; 8，J ++）                             {                                 如果（（uintArray [1] - 安培; Math.pow（2，j）的）== Math.pow（2，j））后                                 {                                     。座位[（（（2047 - I）* 8）+ J）状态=卖;                                 }                             }                         }                     }                     drawSeats（）;                 }             }）;             $阿贾克斯（{                 键入：GET，                 网址：@ Url.Action（GetQueuedSeats，事件），                 数据：{                    layoutID：@ Model.LayoutID                 }，                 数据类型：JSON，                 成功：函数（结果）{                 变种queuedSeats = result.split（，）;                 $（＃加载）隐藏（）。                     对于（VAR I = 0; I＆LT; queuedSeats.length;我++）                     {                         如果（queuedSeats [I]！=）{                             。座位[queuedSeats [I]状态=排队;                         }                     }                     drawSeats（）;                 }             }）;         }         功能drawSeats（）{             对于（VAR I = 0; I＆LT; seats.length;我++）             {                  如果（席[I] .STATUS ==可用）                  {                      $（席[I] .ID）的.css（'补'，'＃888888'）;                  }                  如果（席[I] .STATUS ==卖）                  {                      $（席[I] .ID）的.css（'补'，'＃ff4848'）;                  }                  如果（席[I] .STATUS ==排队）                  {                      $（席[I] .ID）的.css（'补'，'＃F0B702'）;                  }                   如果（席[I] .STATUS ==选择）                  {                      $（席[I] .ID）的.css（'补'，'＃00c865'）;                  }             }         }         功能enqueueSeat（currentSeat）{             $阿贾克斯（{                 键入：GET，                 网址：@ Url.Action（EnqueueSeat，事件），                 数据：{                     selectionGUID：@（selectionGUID），                     sea​​tID：currentSeat，                     layoutID：@（Model.LayoutID）'                 }，                 数据类型：JSON，                 成功：功能（数据）{                     如果（数据！=）                     {                         席[currentSeat] .STATUS =选择;                         席[currentSeat] .token =数据;                     }                     drawSeats（）;                 }             }）;         }         功能dequeueSeat（currentSeat）{             $阿贾克斯（{                 键入：GET，                 网址：@ Url.Action（DequeueSeat，事件），                 数据：{                     reservationToken：席[currentSeat] .token                 }，                 数据类型：JSON，                 成功：功能（数据）{                     如果（数据）                     {                         席[currentSeat] .STATUS =可用;                         席[currentSeat] .token =;                     }                     drawSeats（）;                 }             }）;          }     ＆LT; / SCRIPT＆GT; ＆LT; /节＆gt;

解决方案

您只需2个功能结合到 ajaxStart（）和 ajaxStop（） 分别。

.ajaxStart（）

  

注册一个处理程序的第一个Ajax请求开始时被调用。   这是一个Ajax事件。

.ajaxStop（）

  

注册一个处理函数，当所有Ajax请求已完成被调用。   这是一个Ajax事件。

$。ajaxStart（函数（）{     $（'＃装载）显示（）。 //显示加载指示器 }）; $ .ajaxStop（函数（） {     $（'＃装载）隐藏（）。 //隐藏负荷指标 }）;

这些将在Ajax请求开始或自动调用结束。

I have a seat chart. When i click a seat, i want to show a loading gif. Seat chart comes from svg document. Seats are svg elements. When ajax response returned, i want to hide loading gif. I wrote code below but it doesnt work.

<section> <div class="parent" style="text-align: center;"> <div class="panzoom" style="width: 500px; height:375px;"> <div class="loading" style="display:none" id="loading"><img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/></div> </div> </div> <div class="seperator"></div> <div class="buttons" style="text-align:center;"> <input type="range" class="zoom-range"> <a class="button reset">Sıfırla</a> </div> <script> $(function () { var $section = $('section').first(); $section.find(".panzoom").svg({ loadURL: "resources-biletino.s3.amazonaws/content/venue/17/seatChart-01.svg",onLoad:function(){ initAll(); } }); $section.find(".panzoom").panzoom({ $zoomRange: $section.find(".zoom-range"), $reset: $section.find(".reset"), cursor: "auto", increment: 0.6 }); }); function seatObject(id, label, status, token){ this.id = id; this.label = label; this.status = status; this.token = token; } var seats = []; function initAll(){ $(".seatObj").each(function(){ var id = $(this).attr("id"); var temp = new seatObject("#" + id, "label" + id, "available", ""); seats[id] = temp; $(this).click(function () { var currentSeat = $(this).attr("id"); $("#loading").show(); if (seats[currentSeat].status == "selected") { dequeueSeat(currentSeat); } else { enqueueSeat(currentSeat); //alert($(this).attr("inkscape:label")); } }); }); $.ajax({ type: "GET", url : "@Url.Action("GetFullSeats","Event")", data:{layoutID:'@Model.LayoutID'}, dataType : "json", success:function(result) { var uintArray = Base64Binary.decode(result); for (var i = uintArray.length - 1; i >= 0; i--) { if (uintArray[i] > 0) { for (var j = 0; j < 8; j++) { if ((uintArray[i] & Math.pow(2, j)) == Math.pow(2, j)) { seats[(((2047 - i) * 8) + j)].status = "sold"; } } } } drawSeats(); } }); $.ajax({ type: "GET", url : "@Url.Action("GetQueuedSeats", "Event")", data:{ layoutID:'@Model.LayoutID' }, dataType : "json", success:function(result){ var queuedSeats = result.split(","); $("#loading").hide(); for (var i = 0; i < queuedSeats.length; i++) { if (queuedSeats[i] != ""){ seats[queuedSeats[i]].status = "queued"; } } drawSeats(); } }); } function drawSeats(){ for (var i = 0; i < seats.length; i++) { if (seats[i].status == "available") { $(seats[i].id).css('fill','#888888'); } if (seats[i].status == "sold") { $(seats[i].id).css('fill','#ff4848'); } if (seats[i].status == "queued") { $(seats[i].id).css('fill','#F0B702'); } if (seats[i].status == "selected") { $(seats[i].id).css('fill','#00c865'); } } } function enqueueSeat(currentSeat){ $.ajax({ type: "GET", url: "@Url.Action("EnqueueSeat", "Event")", data:{ selectionGUID:"@(selectionGUID)", seatID: currentSeat, layoutID:'@(Model.LayoutID)' }, dataType:"json", success:function(data){ if(data != "") { seats[currentSeat].status = "selected"; seats[currentSeat].token = data; } drawSeats(); } }); } function dequeueSeat(currentSeat){ $.ajax({ type: "GET", url: "@Url.Action("DequeueSeat", "Event")", data:{ reservationToken:seats[currentSeat].token }, dataType:"json", success:function(data){ if(data) { seats[currentSeat].status = "available"; seats[currentSeat].token = ""; } drawSeats(); } }); } </script> </section>

解决方案

You can just bind 2 functions to ajaxStart() and ajaxStop() respectively.

.ajaxStart()

Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

.ajaxStop()

Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

$.ajaxStart(function () { $('#loading').show(); // show loading indicator }); $.ajaxStop(function() { $('#loading').hide(); // hide loading indicator });

These will be automatically called when Ajax requests begin or end.