Afficher le chargement à la place du corps ou div

Question

J'ai un code simple pour montrer et charger la page suivante avec ajax. Avant de montrer la nouvelle page, je peux montrer une image de chargement de div, code:

<div class="loading"><img src="{THEME}/images/loader.gif" /></div> 

div Mon contenu sont ceci:

<div id="dle-content"></div> 

Maintenant, ma question est, comment je peux montrer le chargement div place de dle-contenu div?

jQuery:

<script type="text/javascript"> 
function nextPage() { 
var nextPage = $('#ajax-next-page a').attr('href'); 
ShowLoading(""); 
if (nextPage !== undefined) { 
$.ajax({ 
url: nextPage, 
success: function(data) { 
$('#ajax-next-page').remove(); 
$('#next-page').remove(); 
HideLoading(""); 
$('#dle-content').append($('#dle-content', data).html()); 
} 
}) 
} 
}; 
</script> 

Je veux faire flou ou faire fond sombre sur dle contenu div lors du chargement div est affiché.

Answer 1

Working Fiddle

function ShowLoading() { 
    var img = "loading.gif"; // here define name of image 
    var s = document.createElement("div"); 
    s.style.width = "100%"; 
    s.style.height = "100%"; 
    s.style.background = "rgba(0, 0, 0, 0.8)"; 
    s.style.position = "absolute"; 
    s.style.top = "0px"; 
    s.style.left = "0px"; 
    s.id = "wrapper"; 
    document.body.appendChild(s); 
    var image = document.createElement("img"); 
    image.src = img; 
    image.style.margin = "0 auto"; 
    document.getElementById("wrapper").appendChild(image); 
} 

function HideLoading() { 
    $("#wrapper").fadeOut(); 
} 

Answer 2

peut-être essayer STH comme

  $(".loading").bind("ajaxSend", function() { 
      $(this).show(); 
      $('.dle-content').hide 
     }).bind("ajaxStop", function() { 
      $(this).hide(); 
      $('.dle-content').show 
     })