Por supuesto, puede mostrarlo antes de realizar la solicitud y ocultarlo después de que se complete:

 $('#loading-image').show(); $.ajax({ url: uri, cache: false, success: function(html){ $('.info').append(html); }, complete: function(){ $('#loading-image').hide(); } });

Por lo general, prefiero la solución más general de vincularlo a los eventos globales ajaxStart y ajaxStop, de esa manera aparece para todos los eventos ajax:

 $('#loading-image').bind('ajaxStart', function(){ $(this).show(); }).bind('ajaxStop', function(){ $(this).hide(); });

Use las funciones beforeSend y complete del objeto ajax. Es mejor mostrar el gif desde adentro antes de Enviar para que todo el comportamiento se encapsule en un solo objeto. Tenga cuidado al ocultar el gif usando la función de éxito. Si la solicitud falla, probablemente querrá ocultar el gif. Para ello utilice la función Completar. Se vería así:

 $.ajax({ url: uri, cache: false, beforeSend: function(){ $('#image').show(); }, complete: function(){ $('#image').hide(); }, success: function(html){ $('.info').append(html); } });

Código HTML :

 <div class="ajax-loader"> <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" /> </div>

Código CSS:

 .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%; }

Código JQUERY:

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