1

次のページをajaxで表示してロードするための簡単なコードがあります。新しいページを表示する前に、次divのコードから読み込み中の画像を表示できます。

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

私のコンテンツのdivはこれです：

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

さて、私の質問は、divdle-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ロードが表示されているときに、dle-contentの背景をぼかしたり暗くしたりしたいdiv。

4

2 に答える 2

2

ワーキングフィドル 

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();
}
于 2013-01-05T20:07:15.720 に答える
0

多分sthのように試してみてください

            $(".loading").bind("ajaxSend", function() {
            $(this).show();
            $('.dle-content').hide
        }).bind("ajaxStop", function() {
            $(this).hide();
            $('.dle-content').show
        })
于 2013-01-05T20:05:07.590 に答える