画面ブロックのタイミングについて

このQ&Aのポイント
  • 画面ブロックのタイミングについて解説します。
  • 画面が読み込まれる間に画面をブロックする方法について紹介します。
  • Load終了後に画面のブロックが解除される方法について説明します。
回答を見る
  • ベストアンサー

画面ブロックのタイミングについて

画面ブロックのタイミングについて 次のような感じで、Loadしている間、画面をブロックしたいと思うのですが、「Load終了→一瞬画面ブロックする→解除される」のような動きになってしまいます。 「画面ブロック→Load→Load終了→解除される」のようにするにはどうすればよいでしょうか? 【ソース】 $().ajaxStop($.unblockUI); $.extend($.blockUI.defaults.overlayCSS, {backgroundColor: '#e0e0e0'}); $.blockUI({ message:'<center><p class="block_msg">しばらくお待ちください...</p></center>',css: { width: '300px', height: '50px'}}); $("#item").load("./xxx.php #item" , function(){ $.unblockUI(); }); 以上です。 よろしくお願いします。

  • AJAX
  • 回答数1
  • ありがとう数30

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

一瞬の間にロードされるから、そのように見えるのではないかと.. $().ajaxStop($.unblockUI);は $("#item").load("./xxx.php #item" , function(){ $.unblockUI(); }); のコールバック関数での$.unblockUI();とだぶってます。 どちらかを消すべきです。

w0a15455
質問者

お礼

ありがとうございます。 意味も分からず使ってました。

関連するQ&A

  • jQueryのloadを使用して要素を解析して表示するとき同時にテーブ

    jQueryのloadを使用して要素を解析して表示するとき同時にテーブルのセル背景の色変更をしたいと思っています。 解析して表示は出来るのですがどうしても色が変わってくれません。 $(function(){ var target1_load=$("#target1_load"); target1_load.load("B.html .youso"); if (target1_load.text()=="XXX")target1_load.css({backgroundColor:"red"}); }); としていますが対象divのある個所は下記のようになっています。 <table style="width: 90%"> <tr> <td style="width: 180px"> <div id="d1" style="width: 180px">●ビバガッツ1</div></td> <td style="width: 180px"> <img alt="" src="login-blue.gif" width="89" height="26" /></td> <td style="width: 80px"> <img alt="" src="b_count1.gif" width="24" height="27" /></td> <td style="width: 100px">&nbsp;</td> <td><div id="target1_load"></div></td> </tr> <tr> <td colspan="5"><p id="p1"></p></td> よろしくお願いします

  • マルチスレッドについて

    私はいまマルチスレッドの勉強をしているのですが、ビルドが通るのに実行結果がおかしい状況に陥っています。 ロード画面の処理なのですが、プライマリスレッドでロード画面を描画し、セカンダリスレッドでロード処理を行おうとしています。 問題は、ロードが途中で止まることとロード画面を描画できません。 多分下記の関数が悪いとは思うのですがどうか、ご助力おねがいします。 HRESULT GameMain::LoadScreen() { // スレッドの生成 static bool onlyonce_createthread = FALSE; if(onlyonce_createthread ==FALSE) { hTh = (HANDLE)_beginthreadex( NULL, 0, &loadthread, this, 0, (unsigned*)&thID ); onlyonce_createthread =TRUE; } // ローディング画面の描画 static bool loopflg = TRUE; while(loopflg) { int threadCondition = CheckThread( hTh ); switch(threadCondition) { case THREAD_RUNNING: if(graphloaded_flg ==TRUE) { EnterCriticalSection( &m_criticalSection ); float keep_item = (float)(load_item/MAX_LOAD_ITEM); LeaveCriticalSection( &m_criticalSection ); d2d_control->GaugeDraw(0, 0, keep_item); } break; case THREAD_EXIT: loopflg =FALSE; break; case THREAD_ERROR: return E_FAIL; break; } } float keep_item = (float)(load_item/MAX_LOAD_ITEM); d2d_control->GaugeDraw(0, 0, keep_item); return S_OK; }

  • CSSでのブロック要素に囲み線

    下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素(#lineの部分)にborderを設定するとマージンができてしまうのですが、なぜでしょうか?border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #line { background-color:yellow;border:1px solid #808080;} #header { background-color:#23819e;text-align:center;} --></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • BIOSを触ったら変な画面が出るようになりました。

    だれか助けてください。 BIOSのアップデートを完了し、「Load Set up Defaults」を行った後から、PC起動時に今まで出なかった表示が出て不安です。 表示が出るのは、ASUS P7P55Dの画面の次に出てすぐ消えます。Win7はちゃんと起動します。 画面に出る表示は、 JMicron Technology Corp. PIC Express to SATAII HOST Cntroller ROM v 1.07.11 Copyringht (C) 2005-2009.JMicron Technology Corp.(www.jmicrron.com) Detecting drives ; Done ; drives found. これはなんでっしょうか? 消す方法を教えてください。 お願いします。

  • CSSでのブロックのセンタリングについ

    いつもお世話になっております! BackgroundにFlashを指定して、その上に別のブロックがくるように指定しています。 FlashのCSSの指定が、#flashと#flash object。その上に#flash.sectionが表示されるようにしているのですが、 Flashの大きさとFlash.sectionのWidthが違うせいか、Flash.sectionが画面の中央に表示されません。 FlashのWidthが1800pxでその真ん中(900px地点)からFlash.sectionが表示されてしまいます。 これをうまく、画面の中央に表示されるよう、指定することはできないでしょうか? ご存知の方、何卒ご教授願います!!! CSS指定は下記の通りです。 div#sub{ text-align:center; overflow:auto; } #flash { width:1800px; height:340px; margin:0 auto; position:relative; text-align:center; } #flash object { position:absolute; top:0; left:0; z-index:0; } #flash .section { position:relative; z-index:5; width:1000px; text-align:center; margin:0 auto; }

    • ベストアンサー
    • CSS
  • リンクBOXと見出しに空白が出来る

    ただ今独学でhtmlとcssの勉強をしているのですがcssとhtmlでリンクBOXを作ってその下に見出しをつけようと思ったら添付画像のように空白が出来ます。ソースのどこが悪いのでしょうか。 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>会社方針</title> <style type="text/css"> div#container{border:solid 2px black; padding:10px; width:1200px; margin-left:auto; margin-right:auto} div#top a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-31px; left:1px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about1 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-97px; left:165px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about2 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-163px; left:326px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about3 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-229px; left:490px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about4 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-295px; left:654px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about5 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-361px; left:818px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about6 a { display:block; width:168px; height:64px; background:#ffcc00; position:relative; top:-427px; left:979px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } h2{ padding:-1000px 0px 0px 0px; font-size:1.15em; border-left:solid 18px #ffcc00; padding-left:5px; margin:3px; } p { margin: 0.5em 0px; } </style> </head> <body> <div id="container"> <h1><img src="title.png" alt="株式会社****"/></h1> <div id="top"> <a href="../index/index.html"><p align="center">TOP</p></a> </div> <div id="about1"> <a href="about1.html"><p align="center">会社方針</p></a> </div> <div id="about2"> <a href="about2.html"><p align="center">企業概要</p></a> </div> <div id="about3"> <a href="about3.html"><p align="center">製品</p></a> </div> <div id="about4"> <a href="about4.html"><p align="center">福祉サービス</p></a> </div> <div id="about5"> <a href="about5.html"><p align="center">スタッフ紹介</p></a> </div> <div id="about6"> <a href="about6.html"><p align="center">お問い合わせ</p></a> </div> <h2>会社方針</h2> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ロゴ画面から進みません!

    idea pad320-151APです。PCの知識はほとんどないです。 初期化を進めていましたが、途中で全く進まなくなったため、電源ボタン長押しで強制終了しました。再度立ち上げましたが、ロゴ画面から進まず再起動を繰り返します。 分からないながらも検索して、F2のInsydeH20 Setup Utilityから、F9の【Load Optimized Defaults?】でYesを押し、F10で【save&exit】をやってみましたが、結果は変わりませんでした。 ほかに何か方法はありますでしょうか? これはHDDが破損してしまった可能性が高いでしょうか? ご教授いただければと思います。 ※OKWAVEより補足:「Lenovo:ノートブック (IdeaPad・Lenovo等)」についての質問です。

  • センテンスブロックのセンターリング

    既出でしたらすみません。 どのような用語で調べたらよいか分からなくて質問させていただきます。 htmlにてテキストを入力した場合、 左寄せにしたあるブロックごとをセンターリングしたいです。 (添付図参照) その場合、 "text-align:left; width:500px; margin:auto;" で p style , div , ul などで括れば良いと思うのですが、 上記「width:500px」を改行されているセンテンスの最大長さ (添付図でWの横幅)に自動的に設定するコマンドなどあるのでしょうか? 一回一回、この数値を試してみないと、調度よい長さが分かないため 修正に時間がかかります。 よろしくお願いします。

  • text-alignの解除の方法

    text-alignの解除の方法ってありませんか? 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか? IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。

  • IE6/ブロック要素のliで入れ子がある場合に改行のような余計なマージンが入る

    タイトルの通りなのですが、 左側サイドにタブメニューを設置しようとしているのですが、 IE6のみ、余計な改行のようなマージンが入ってしまいます。 色々と調べたのですが、どうしても解決できなかったので、お知恵をお貸しいただければと思います。 HTMLは以下のように書いています。 ==== <div id="menu"> <ul id="navi-block"> <li><a href="#" onmouseover="MM_showHideLayers('p0','','show')" onmouseout="MM_showHideLayers('p0','','hide')">メニュー名</a> <div id="p0" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> <li><a href="#" onmouseover="MM_showHideLayers('p1','','show')" onmouseout="MM_showHideLayers('p1','','hide')">メニュー名</a> <div id="p1" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> </div> ==== CSSは以下のように書いています。 ==== #menu { width:218px; position:relative; z-index:2;} ul#navi-block {list-style:none;} ul#navi-block li a {display:block;width:175px; height:30px;margin:0;padding:0.75em 25px 0 20px;background: url(../images/marker_square_gray_navi.gif) right center no-repeat;border-top:#CCCCCC 1px solid;} div#p0 {left:220px; top:0;} div#p1 {left:220px; top:0;} .set { width:220px; position: absolute; visibility: hidden; z-index:3;} ====

    • ベストアンサー
    • CSS