Question

我希望在用户点击按钮时隐藏所有页面，在页面中心显示带有加载gif的div并向页面调用ajax请求。当ajax完成隐藏阴影时，隐藏加载div。有可能吗？谁能解释我怎么样？我看到here这段代码：$

("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

我可以用这个吗？我可以在哪里拍摄阴影？

Answer 1

用css创建新的div（id：loader）：position：fixed; z-index：90;顶部：0;左：0;背景：rgba（0,0,0,0.5）;把它放在身体部分
使用css创建新div：margin：30％auto;宽度：200px;身高：60px;背景：#fff;把它放在第一点创建的div中。加入文本'Loading ...'或者其他。
创建js函数，它将在开始加载时显示第一个点的div，并在加载结束时隐藏它。

E.g。

function loadingOn() {
    $('#loader').fadeIn(300);
}

function loadingOff() {
    $('#loader').fadeOut(300);
}

function loadingToggle() {
    $('#loader').fadeToggle(300);
}

您只能在需要时调用该功能：）

Answer 2

查找jQuery的colorbox。这将完成你想要的一切，只需要一个简单的轻量级库，你已经使用了jQuery。

http://jacklmoore.com/colorbox/

如何调用页面并在调用ajax时显示加载div

2 个答案: