Question

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

Answer 1

添加具有特定名称的DIV（假设为'loading'），其宽度和高度均为100％，并具有（半）透明背景（图像）。添加一个包含加载gif的内部DIV（比如说'loadingInner'）。将加载DIV设置为display：none默认设置。

然后，当您访问外部信息时，使用jQuery显示加载DIV：

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

希望这有帮助

Answer 2

使用低于css的div。您需要做的就是显示/隐藏此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;
}

演示：http://jsfiddle.net/4k9cH/

Answer 3

当你显示加载的gif时，将它包装在一个覆盖页面的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之前与页面进行交互。

你可能也想隐藏错误的叠加层（检查错误回调），这样如果你的请求失败，至少用户仍然可以访问页面上的内容。

Answer 4

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

在javascript中显示页面加载gif

4 个答案: