divを一度にいくつかレンダリングするように操作するにはどうすればいいですか？

これは「固有の十分な」質問に該当するかどうかはわかりませんが、私はそれがあまりにも具体的で既に回答していることを発見しました。 JavaScriptを使用してブロック表示スタイルのdivで地図を動的に作成しようとしています。遅れを防ぐために、ユーザーが1つのスペースをすべての方向に移動するだけでなく、もはや表示されない行/列を削除するときに、ユーザーが「カメラを動かす」ように、要素を作成して破棄したい。divを一度にいくつかレンダリングするように操作するにはどうすればいいですか？

このように、データ専用の配列と地図全体を格納する配列の2つの構造体と、ユーザーが見ることができる平面を表す別の構造体があり、divで構成されています。

最初に表示される要素が実際のマップの最初の四角ではなく、実際に同じ中間を共有する領域であるため、地図が最初にレンダリングされるときに問題が発生します。参考のために、以下の画像を参照してください：

for (var n = 0 ; n < map_xy.lenght; n++){ // Will repeat by the number of cells 
    var newtile = document.createElement('div'); 
    newtile.className = "map_cell"; 
    newtile.id = n.toString(); 
};

、私の質問は：プログラムが実際にそれをレンダリングすることなく、マップ全体を知っているように、どのように私はそれを作ることができますか？。これは私が必要とするものです。隣接するセルや他の同様のものを検索する地形の生成があります。

私はこれが正しいaproachであるかどうかわかりませんが、私の目標は、ユーザーが1000 x 1000のセルマップをリクエストしたときに、彼女の40〜40〜 "ウィンドウ"、ブラウザがクラッシュしないように。

あなたのお手伝いをしていただきありがとうございます。現在の状態が不明確な場合は、これを編集します。

出典

2016-04-12 user3818448

仮想リストの作成方法を調べることができます。マップ全体のセルは、位置情報（どこに表示されているか）を持つJavascriptオブジェクトとして、おそらく配列として格納されます。次に、可視ウィンドウを計算し、そのウィンドウ内にあるセルを特定する必要があります（スクロールがスムーズになるようにいくつかのバッファを加えたもの）。次に、それらのセルだけをレンダリングするようにDOMを更新します。更新のパフォーマンスを向上させるために、仮想DOM実装を参照することもできます。 – Bill

あなたは近いと思います。 2次元配列を使用してマップ全体を保存します。この場合、初期レンダリングで事前定義された境界線を持つネストされたループを使用できます。 init_x_leftは、init_x_right、init_y_top、init_y_topは、あなたがレンダリングしたい初期エリアを囲む

var map; // assume this is a 2D array, where each element has a property 
     //called "tileID", which you want assigned to a corresponding div 
for(var x = init_x_left; x < init_x_right; x++){ 
    for(var y = init_y_top; y < init_y_bot; y++){ 
     var newtile = document.createElement('div'); 
     newtile.className = "map_cell"; 
     newtile.id = map[x][y].tileID; // example 
    } 
}

。

ここで注意すべき重要なことは、コードを使用すると、0で開始を掲示し、あなたが全体の配列を横断しているので、マップ全体を毎回レンダリング行いますmap_xy.lengthまで行くということです。その上に、2D情報を1次元配列に格納しているので、必要以上に複雑な情報を扱うことになりますが、私の考えでは不可能ではないと思いますが？

しかし、ビットを検索した後、javascriptが2D配列を宣言する簡単な方法を持っていないように見えるので、関数を作成して作成する必要があります。

ビルはバーチャルリスト/ DOMについてのコメントに記載されていますが、うまくいけばこれはおそらくこれよりも洗練された解決策ですが、それ自体の課題もあります。 Google Mapsがスムーズにスクロールする方法を見つけ出す方法があれば、それを再現しようとします。

出典

2016-04-12 19:53:52 NAMS

これは、実際の答えはありませんが、問題が存在する理由は説明しない：

https://jsfiddle.net/atrpm1qy/

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Map</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway:400,300,600"> 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> 
    <style> 
     #map { 
      width: 500px; 
      height: 500px; 
      overflow: scroll; 
      position: absolute; 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%); 
     } 

     .row { 
      white-space: nowrap; 
      margin: 0px; 
      padding: 0px; 
      font-size: 0; 
     } 

     .tile { 
      display: inline-block; 
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAALHRFWHRDcmVhdGlvbiBUaW1lAFNhdCAyNCBPY3QgMjAxNSAxMzo1NDo1NCAtMDgwMKYSKEcAAAAHdElNRQffChgUNwUL4zycAAAACXBIWXMAAA9fAAAPXwHXitrJAAAABGdBTUEAALGPC/xhBQAAAyNJREFUeNptls1uE0EQhJfNBlkCyRaKxIqTj+HElWfhcXg6rtw4+pCDLQXJFgkYxULU7rcuV3ozspLZnp6a7uqfmVdfvr5rxrFYvWHS99fb7VMTQxL9TeFuc9Df9+ulFb5/u9en5AiP+0cwO0OjNOovDaHx6fON0bVNynN01IpZwHb8057dZoI7HzNBeBvouYRws29SLiiBSMjo5v7m3C4b7rA/JQnJLd5gqMfVh48jKavu5/bP4/7v7u53Qdee+7tfp+PT+nZ1PF29XS1YlUTQ2mUJwdPnw8O/bvEahA6nZJfp3vwY3LOlDKEnVygc9oeMkBWIiqiW3R38aCYIoAljomeQzcn69tpLhS5JiMQUA2ENsRrRsVTnzfOBAIyCEa6ffBrs7VczD5b61KTF0tHfk6kXotbwlINtI75ihxQst4vssrB1FrGz0MJ+k24d0HW2OUHNqwZpja79CovWyByW8Uy/zMXcb25dJaXgu6T7kuD9EHBIk4LRNSnlitCOuugwUTXRvoAegTW65cz100m5dE6tC8l0pzatMNd0i0Qv4ZGO3IeWuX9acr9pjY6edip/qT48ddXYRR0mnUKdaSmUdBSktElzTWCfUJNIzmBS3oc1s6ZbyHxWaKA35yZRzHEXkbFYAxZ+wAnb9SmLL2maFONpaZ8SJrpDOgKdfD2gUxCGSnZUsctsihxHrNSzGTPX+gkha8UhacmW5nlbL8O5n9DZEN3amunuOnjj0IvMPsu+k+1QMTw5TKwm7i79kHTzzpxDq9l/fBi7jG4nVLp5mw4U8T1edQeK4NKEowPOnxTFGyjyqU7W9kXD6ZQ6r6BjBKB5TLJE0sPt9GyhSdkcV0C+RBD2/U2el+aTZgyjDx7gi1sNer5jaVC0NtoL12GpFV8MVIYbzESR0LUZErmZs9wloZqKmdmahgfHuaPkM1DCrqS/IHz750sLdFeyw4jrbl8ZjCmLbI4vSNdkea2CTtEwwWRfTRk/UmAKsi1CL/klnZq4trIhpu1ZcUZv6KZ4hGlZunmtM4y7WFVJkpMRunSIUs88TEqE5jVvSRZw3vP/ARLfRAcPZyviAAAAAElFTkSuQmCC'); 
      height: 32px; 
      width: 32px; 
     } 
    </style> 
</head> 

<body> 
    <div id="map"></div> 

    <script> 
     var rows = 100; 
     var columns = 100; 

     var map = document.querySelector('#map'); 
     var row, column, tileRow, tile; 
     var height = 0; 
     var width = 0; 

     function makeRow() { 
      var div = document.createElement('div'); 
      div.classList.add("row"); 
      return div; 
     } 

     function makeTile() { 
      var div = document.createElement("div"); 
      div.classList.add("tile"); 
      return div; 
     } 

     for (row = 0; row < rows; row += 1) { 
      tileRow = makeRow(); 
      map.appendChild(tileRow); 
      width = 0; 
      for (column = 0; column < columns; column += 1) { 
       tile = makeTile(); 
       tileRow.appendChild(tile); 
       width += tile.offsetWidth; 

      } 
      height += tileRow.offsetHeight; 
     } 

     map.scrollTop = height/2 - map.offsetWidth/2; 
     map.scrollLeft = width/2 - map.offsetHeight/2; 
    </script> 
</body> 

</html>

は非常に多くのタイルまで取得し、ブラウザが強大怒ります。

私は、マップを描くためにキャンバスタグを探索するでしょう。

出典

2016-04-12 20:42:14 Will

divを一度にいくつかレンダリングするように操作するにはどうすればいいですか？

答えて

関連する問題