如何在调用 ajax 时隐藏页面并显示正在加载的 div

发布于 2025-01-02 13:50:49 字数 499 浏览 2 评论 0原文

我想在用户单击按钮时隐藏所有页面，在页面中心显示一个带有加载 gif 的 div，并对页面调用 ajax 请求。当ajax完成隐藏阴影时，隐藏加载div。有可能吗？有人可以解释一下怎么做吗？我看到这里这段代码:$

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

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

原文

i want to shadow all the page when user clicks a button, show a div in the center of page with a loading gif and call an ajax request to a page. When ajax finishes hide shadow, hide loading div. is possible? can someone explain me how?
i see here this code:$

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

can i use this? where i can take shadow?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

万劫不复 2025-01-09 13:50:49

使用 css:position:fixed 创建新的 div (id:loader)； z 指数：90；顶部：0；左：0；背景：rgba(0,0,0,0.5);将其放在 body 部分的和处
用 css 创建新的 div：margin: 30% auto;宽度：200px；高度：60 像素；背景：#fff；将其放入第一点创建的div中。将文本“正在加载...”或其他内容放入其中。
创建 js 函数，该函数将在开始加载时从第一个点显示 div 并在加载结束时隐藏它。

例如，

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

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

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

您必须仅在需要时调用该函数:)

Create new div (id: loader) with css: position: fixed; z-index: 90; top: 0; left: 0; background: rgba(0,0,0,0.5); Put it at the and of the body section
Create new div with css: margin: 30% auto; width: 200px; height: 60px; background: #fff; Put it into div created in first point. Put into it text 'Loading...' or sth else.
Create js functions which will show div from first point at start loading and hide it at the end of the loading.

E.g.

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

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

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

You must only call that functions when you need it :)

回复收藏 0 原文