dojo.xhrpostを使用してajax送信を行っています。
応答が出るまでかなり時間がかかります。
だから私は応答を得るまでgifをロードするページを表示したいと思います。
同時に、ユーザーが応答を受信するまでページ上の何もクリックできないように、ページの表示を非表示にするか減らしたいと思います。
応答が受信されるまで、ページ読み込みgifをWebページ全体にオーバーレイしたいと思います。
質問する
2011 次
4 に答える
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/
于 2013-01-04T06:56:17.057 に答える
1
読み込み中のgifを表示するときは、不透明度の低いページを覆うdivでラップします。
あなたのドームでは、あなたは次のようなものを貼り付けることができます
<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 に答える
1
幅と高さが100％で、（半）透明な背景（画像）を持つ特定の名前（「読み込み中」など）のDIVを追加します。読み込み中のgifを保持する内部DIV（たとえば「loadingInner」）を追加します。ロードするDIVを表示するように設定します：デフォルトではなし。
次に、外部情報にアクセスするときに、jQueryを使用してロード中のDIVを表示します。
function showLoading() {
var loadControl = $("#loading");
if (loadControl) {
$("#loadingInner").show();
$("#loading").show();
}
}
お役に立てれば
于 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 に答える