Mensaje de carga manteniendo el contenido anterior

[IMAC/]

Hola

Actualmente uso esto para mostrar un mensaje de carga:

$("nombreDelDiv").empty().html('<img src="imgs/loading.gif" />');

He visto que a veces queda mejor mostrar una capa semetransparente gris y con un loading en medio pero manteniendo el contenido anterior hasta que carga el nuevo contenido.

¿Cómo se hace eso?

Gracias.

[DrFaust]

Agregás un contenedor por encima del contenido, y lo mantenés oculto hasta que necesitás cargar información. Algo así:

Código HTML:

<div id="loading" style="display:none;z-index:2;"></div>
<div id="contenido" style="z-index:1;">Este es el contenido...</div> 

Código:

function cargarContenido() {
    $("#loading").show();
    $.get("contenido.php", function(r) {
        $("#contenido").html(r);
        $("#loading").hide();
    });
}

[IMAC/]

Muchas gracias! No se me había ocurrido!

[IMAC/]

Pero... y cómo hago para que ocupe todo el alto del div del contenido?

Si ese loading lo pondré en varios contenidos con diferentes altos variables cada uno de ellos y no predecibles... (el contenido carga dinámicamente)