Cómo llamar a jquery ajaxStart + ajaxComplete

Question

Tengo una función de carga y me gustaría que el código escriba algunos html en un div mientras se carga, y cuando se completa, para mostrar la página. Vi algunos pequeños comentarios sobre los eventos ajaxStart y ajaxComplete, sin embargo, no estoy seguro de cómo implementarlos.

Aquí es el jQuery estoy pensando en utilizar, sin embargo, no está seguro de cómo poner en práctica dentro del código que tengo actualmente ...

$(document).ajaxStart(function(){ 
    $('#content').html("Loading Content..."); 
    }); 

Aquí es el jQuery actual que estoy usando:

//Load content 
$(".load").click(function(){ 
    $("#content").empty();   
    loadName = $(this).attr("id"); 
    $("#content").load("/content/" + loadName + ".php"); 
    }); 

Answer 1

Si es un solo div y desea actualizar su contenido con un mensaje/indicador de carga, puede hacerlo así:

$("#content").html('<strong>Loading...</strong>') 
      .load("/content/" + loadName + ".php"); 

No utilizaría ajaxStart y ajaxStop/ajaxCompleteglobal events a menos que tenga un indicador de carga común para todas llamadas ajax. Dicho esto, se puede hacer de la siguiente manera:

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

donde el elemento loading es lo que quiere revelar durante una llamada AJAX.