Question

我有一个简单的代码来显示和加载带有ajax的下一页。在显示新页面之前，我可以显示div的加载图片，代码：

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

我的内容是这样的：

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

现在，我的问题是，如何显示加载div而不是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>

我希望在加载div时显示内容div上的模糊或深色背景。

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

也许试试......

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

显示加载而不是body或div

2 个答案: