Question

I have a simple code to show and load next page with ajax. Before showing the new page, I can show a loading image from div, code:

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

My content’s div are this:

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

Now, my question is, how I can show loading div instead of dle-content 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>

I want to make blur or make dark background on dle-content div when loading div is showing.

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();
}