0

クローム 18.0.1025.162m ストラット 1.x

js/mootools を使用して作成している div の基本構造は次のとおりです。

<div class="track">
 <table>
  <tr>
   <td style="white-space:nowrap; width:1%;">
   <td style="white-space:nowrap; width:1%;">
   <td>
  </tr>
 </table>
 <div>
  <table>
   <tr>
    <td style="width:50%;">
     <fieldset style="height: 244px; ">
      <legend></legend>
       <table>
        <tr>
         <td>
          <img>
         </td>
         <td>
          <table>
           <tr>
            <td class="label"></td>
            <td class="comparable"></td>
           </tr>
           <tr>
            <td class="label"></td>
            <td class="comparable"></td>
           </tr>
           ... 8 more of same
          </table>
         </td>
        </tr>
       </table>
       <table>
        <tr>
         <td style="text-align: center; ">
          <button type="button"></button>
         </td>
        </tr>
       </table>
      </fieldset>
     </td>
     <td>
     ...essentially same as prior td
     </td>
    </tr>
   </table>
 </div>
</div>

関連する CSS:

div.track {
 outline:solid thin;
 margin-bottom:10px;
 background-color:#DCEDEA;    
}

td.label {
 text-align:right; 
 white-space:nowrap;
}

「比較可能」は単なるフラグであるため、後で見つけてスタイルを変更できます。

これらの構造は、単一の JSON 応答から onreadystatechange 関数で作成されます。これらのうち100以上が作成されていますが、すべての準備が整うまで何も表示されず、すべてが一度に表示されます. 各 div の準備が整い、(mootools Element.inject を使用して) DOM に追加されるとすぐに、各 div が表示されることを期待します (そして、ユーザーが進行状況を確認できるようにすることを好みます)。Chrome の開発ツールを使用して手順を進めると、挿入直後に div が表示されるという予想される動作が表示されます。

私は Web 開発にかなり慣れていないので、私の方法を批判する必要があると感じた場合は、あなたの考えを聞くことができますが、私が見ている動作についての説明が本当に欲しいです.

ありがとう。

編集

ページ html の基本的な考え方:

<body>
 <div id='foo'></ div>
</body>

js の基本的な考え方 (onreadystatechange 内):

var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
   getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}
4

1 に答える 1

0

DIVは一度に 1 つずつ表示されているのではないかと思いますが、すべてが非常に速く表示されているため、すべてが一度に表示されているように見えます。その for ループに追加console.log(i);し、DIV の読み込み中にコンソールを監視します。Google Chrome を使用して Ctrl+Shift+J を使用するか、Firefox に Firebug 拡張機能をインストールすることで、コンソールを起動できます。

編集：

その場合、ブラウザの表示ループと関係があると思います。おそらく次のようなものです（非常に大まかな擬似コードで）：

while (1) {
    executeJavascript(); // blocks until all javascript is executed, including your loop
    displayPage();
}

したがって、この議論は役に立つかもしれません:スクリプトが負荷の高い処理を行っているときにブラウザを強制的に再描画するにはどうすればよいですか?

于 2012-05-02T00:32:27.740 に答える