Show loading image while ajax is performed

Question

I am just wondering how to show an image that indicates that the async request is running  I use the following code to perform a async request     ajax     url  uri    cache  false    success  function html           info   append html             Any ideas

User · Answer

Before your call either insert the loading image in a div/span somewhere and then on the success function remove that image. Alternatively you can set up a css class like loading that might look like this

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

And then assign this class to a span/div and clear it in the success function

User · Answer

something like this       image   show      ajax       url  uri      cache  false      success  function html              info   append html              image   hide

User · Answer

You can add ajax start and complete event  this is work for when you click on button event     document  bind  ajaxSend   function                      button   html   lt i class  fa fa-spinner fa-spin  gt  lt  i gt  Loading                    button   attr  disabled    disabled               bind  ajaxComplete   function                      button   html   lt i class  fa fa-check  gt  lt  i gt  Show                    button   removeAttr  disabled    disabled

User · Answer

x000D   x000D    strong text  Set the Time out to the ajax calls x000D  function testing    x000D       x000D          load   css  display    block    x000D      setTimeout function    x000D        ajax   x000D               type   GET   x000D   x000D             x000D               url testing com  x000D               x000D               async  false  x000D                x000D               success   function response   x000D              x000D               alert  connection established    x000D   x000D                 x000D                 x000D              complete  function    x000D              alert  sended    x000D                  load   css  display    none    x000D            x000D                x000D              error  function jqXHR  exception    x000D                         alert  Write error Message Here    x000D                       x000D   x000D   x000D             x000D         5000   x000D   x000D   x000D      x000D     loader   x000D      border  16px solid  f3f3f3  x000D      border-radius  50   x000D      border-top  16px solid  3498db  x000D      width  120px  x000D      height  120px  x000D      -webkit-animation  spin 2s linear infinite     Safari    x000D      animation  spin 2s linear infinite  x000D      x000D     x000D       Safari    x000D     -webkit-keyframes spin   x000D      0    -webkit-transform  rotate 0deg     x000D      100    -webkit-transform  rotate 360deg     x000D      x000D     x000D     keyframes spin   x000D      0    transform  rotate 0deg     x000D      100    transform  rotate 360deg     x000D      x000D   lt div id  load  style  display  none  class  loader  gt  lt  div gt  x000D   lt input type  button   onclick  testing     value  SUBMIT   gt  x000D   x000D   x000D

User · Answer

I think this might be better if you have tons of   ajax calls    document  ajaxSend function          AnyElementYouWantToShowOnAjaxSend  fadeIn 250         document  ajaxComplete function          AnyElementYouWantToShowOnAjaxSend  fadeOut 250         NOTE   If you use CSS  The element you want to shown while ajax is fetching data from your back-end code must be like this   AnyElementYouWantToShowOnAjaxSend       position  fixed      top  0      left  0      height  100vh     to make it responsive        width  100vw     to make it responsive        overflow  hidden    to remove scrollbars        z-index  99999    to make it appear on topmost part of the page        display  none    to make it visible only on fadeIn   function

User · Answer

Create a load element for e g  an element with id   example load  Hide it by default by adding style  display none    Now show it using jquery show element function just above your ajax       example load   show       ajax        type   POST        data           url    url        success  function                Now hide the load element              example load   hide

User · Answer

The  image  people generally show during an ajax call is an animated gif  Since there is no way to determine the percent complete of the ajax request  the animated gifs used are indeterminate spinners  This is just an image repeating over and over like a ball of circles of varying sizes  A good site to create your own custom indeterminate spinner is http   ajaxload info

User · Answer

You can  of course  show it before making the request  and hide it after it completes       loading-image   show      ajax         url  uri        cache  false        success  function html               info   append html                  complete  function                loading-image   hide                      I usually prefer the more general solution of binding it to the global ajaxStart and ajaxStop events  that way it shows up for all ajax events       loading-image   bind  ajaxStart   function          this  show       bind  ajaxStop   function          this  hide

User · Answer

HTML Code     lt div class  ajax-loader  gt     lt img src     url  guest images ajax-loader gif       class  img-responsive    gt   lt  div gt    CSS Code    ajax-loader     visibility  hidden    background-color  rgba 255 255 255 0 7     position  absolute    z-index   100  important    width  100     height 100       ajax-loader img     position  relative    top 50     left 50       JQUERY Code     ajax     type  POST     beforeSend  function            ajax-loader   css  visibility    visible           url   quantityPlus     data        productId  p1      quantity  p2      productPrice  p3      success function data              p1  value   text data newProductQuantity              p1  amount   text      data productAmount            totalUnits   text data newNoOfUnits            totalAmount   text      data newTotalAmount          complete  function            ajax-loader   css  visibility    hidden

User · Answer

Use the ajax object s beforeSend and complete functions  It s better to show the gif from inside beforeSend so that all the behavior is encapsulated in a single object  Be careful about hiding the gif using the success function  If the request fails  you ll probably still want to hide the gif  To do this use the Complete function  It would look like this     ajax       url  uri      cache  false      beforeSend  function                image   show               complete  function                image   hide               success  function html              info   append html

User · Answer

I ve always liked the BlockUI plugin  http   jquery malsup com block   It allows you to block certain elements of a page  or the entire page while an ajax request is running

[javascript] Show loading image while $.ajax is performed

Examples related to javascript

Examples related to jquery

Examples related to css