1

我正在使用 dojo.xhrpost 进行 ajax 提交。
需要很长时间才能得到响应。
所以我想显示一个页面加载 gif 直到我得到响应。
同时，我有点想隐藏或降低页面的可见性，以便用户在收到响应之前无法单击页面上的任何内容。
我想将页面加载 gif 覆盖在整个网页上，直到收到响应。

4

4 回答 4

2

use a div with below css. All you need to do is show/hid this div

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    opacity: 0.6;
    background: black url(http://1.bp.blogspot.com/_xn2gmPb9TfM/SBZwjqwS6MI/AAAAAAAABZw/uMVQlcxlosA/s400/loading-icon.gif) no-repeat center center;
}​

demo: http://jsfiddle.net/4k9cH/

于 2013-01-04T06:56:17.057 回答
1

Add a DIV with a specific name (lets say 'loading') that is 100% in width and height and has a (semi) transparent background (image). Add an inner DIV (lets say 'loadingInner') that holds the loading gif. Set the loading DIVs to display: none by default.

Then, when you access external information, show the loading DIVs with jQuery:

function showLoading() {
    var loadControl = $("#loading");
    if (loadControl) {
        $("#loadingInner").show();
        $("#loading").show();
    }
}

Hope this helps

于 2013-01-04T06:55:38.893 回答
1

希望这也有助于加载图像在 ajax 调用挂起状态期间出现在整个窗口中： http ://www.edwardawebb.com/web-development/cakephp/disable-page-show-translucent-progress-bar

于 2013-08-29T14:15:46.710 回答
1

当您显示加载 gif 时，将其包装在一个 div 中，该 div 以一些低不透明度覆盖页面。

在您的 dom 中，您可以粘贴类似的东西

<div id="overlay"><img src="loading.gif"></div>

风格像

position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: white;
opacity: 0.3;
display:none;
z-index: 100; /* should be large enough to be on top of everything */

然后在 ajax 调用之前，显示 div

dojo.query("#overlay").style("display", "block");

然后当加载成功时，你隐藏它

var deferred = dojo.xhrPost({ ..., 
                              load: function() {
                                 dojo.query("#overlay").style("display","none");
                               }
                             });

我没有在 Dojo 上做太多的工作，但它似乎应该可以工作。如果没有，我敢打赌它真的很接近。

只要您在#overlay div 上没有事件绑定，用户应该无法与页面交互，直到 div 被隐藏。

您可能还想隐藏错误覆盖（检查错误回调），以便如果您的请求失败，至少用户仍然可以访问页面上的内容。

于 2013-01-04T07:04:04.043 回答