在javascript中显示页面加载gif

Displaying page loading gif in javascript

本文关键字：加载 gif 显示 javascript      更新时间：2023-09-26

我正在使用dojo.xhrpost进行ajax提交。
需要相当长的一段时间才能得到回应。
所以我想显示一个页面加载gif直到我得到响应。
同时，我有点想隐藏或减少页面的可见性，这样用户就不能点击页面上的任何东西，直到收到响应。
我想在整个网页上覆盖页面加载gif，直到收到响应。

使用下面的cssdiv。你所需要做的就是显示/隐藏这个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/

显示正在加载的gif时，用低透明度的div覆盖整个页面。

在dom中，你可以添加像

这样的内容
<div id="overlay"><img src="loading.gif"></div>

style like

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，但似乎这应该工作。如果没有，我打赌肯定非常接近。

只要你在#overlaydiv上没有事件绑定，用户应该不能与页面交互，直到div被隐藏。

你可能也想隐藏错误的覆盖(检出错误回调)，这样如果你的请求失败，至少用户仍然可以得到页面上的东西

添加一个具有特定名称(例如'loading')的div，宽度和高度为100%，背景(图像)为(半)透明。添加一个内部DIV(让我们说'loadingInner')来保存加载的gif。设置加载div默认为:none

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

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

希望能有所帮助

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

相关文章：