顯示頁面加載gif在javascript

我正在使用dojo.xhrpost進行ajax提交。
需要相當長的一段時間才能得到迴應。
所以我想顯示一個頁面加載gif，直到我得到響應。
同時，我想隱藏或減少頁面的可見性，以便用戶不能點擊頁面上的任何內容，直到收到響應。
我想在整個網頁上覆蓋頁面加載gif，直到收到響應。
顯示頁面加載gif在javascript

來源

2013-01-04 Saicharan S M

這是偉大的。祝你好運！ :) – Miguel

我能弄清楚gif加載部分。但我似乎不能覆蓋整個HTML文件。 –

我想我明白了。 http://stackoverflow.com/questions/2212578/overlaying-a-image-over-a-whole-web-page –

當顯示加載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被隱藏。

您也可能想要在出錯時隱藏覆蓋圖（檢出錯誤回調），這樣如果您的請求失敗，至少用戶仍然可以訪問頁面上的內容。

來源

2013-01-04 07:04:04

非常感謝您的支持。你非常有幫助。 –

我找到了一個dojo小部件。 http://dojotoolkit.org/reference-guide/1.8/dojox/widget/Standby.html#id4 –

不錯。如果您查看小部件代碼，它可能看起來與上面類似，但是如果Dojo構建了一個小部件，那看起來似乎是最好的解決方案。讓他們維護那個小部件代碼。乾杯。 –

添加一個具有寬度和高度爲100％且具有（半）透明背景（圖像）的特定名稱（可以說是「加載」）的DIV。添加一個內部DIV（可以說'loadingInner'）來保存加載gif。將加載DIV設置爲顯示：默認爲無。

然後，當你訪問外部信息，顯示加載的div使用jQuery：

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

希望這有助於

來源

2013-01-04 06:55:38

使用一個div下面的CSS。所有你需要做的是顯示/隱藏這個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/

來源

2013-01-04 06:56:17 phnkha

希望這也可以幫助加載圖像Ajax調用掛起狀態期間整個窗口出現： http://www.edwardawebb.com/web-development/cakephp/disable-page-show-translucent-progress-bar

來源

2013-08-29 14:15:46 ram

顯示頁面加載gif在javascript

回答

相關問題