CSS Spritesの性能

Question

私は静的画像500x640をCSSのスプライトで20x20個の飾りを付けてフォルダに入れました。それぞれの部分を表示するためにバックグラウンド位置を設定していますので、後で各部を操作できるような種類のディスプレイが必要です。

CSS：

.piece 
     { 
      width: 20px; 
      height: 20px; 
      display: inline-block; 
      //display: inline; 
      //zoom:1; 
     }   

    .ob { background-image: url("/Images/ob.jpg");} 

JS：

<script id="flipTemplate" type="text/html"> 
    <div class="piece ob" data-bind="style: { backgroundPosition: viewModel.getLeftValue($index) + ' ' + viewModel.getTopValue($index) }, attr: {cond: Cond, id: Id }, click: viewModel.setClick "> 
       </div> 
</script> 
<script type="text/javascript"> 
    viewModel = { 
     flips: ko.observableArray([]),  

     setClick: function (data, e) { 
      e.preventDefault();    
      //doing click 
     }, 

     getLeftValue: function (index) { 

      var position = 0; 

      var currentLine = div(index(), 25); 

      if (currentLine > 0) 
       return '-' + (index() - (currentLine * 25)) * 20 + 'px'; 
      else 
       return '-' + index() * 20 + 'px'; 
     }, 

     getTopValue: function (index) { 

      return '-' + (div(index(), 25)) * 20 + 'px'; 
     } 
    };  

    ko.applyBindings(viewModel); 
</script> 
function div(val, by){ 
    return (val - val % by)/by; 
} 

だから、いくつかのパフォーマンスの問題を抱えています。 はIEで、非常に迅速に約1秒を読み込むオペラとFFの画像の例では約3秒が、Chromeで、それは非常に遅いロードされ

Chromeのすべての部分を表示するのに約17秒を取っている...

ブラウザは、画像を取得して小さな画像を切り取る要求を1回だけ行うだけで、なぜChromeで時間がかかるのですか？

パフォーマンスを向上させる方法はありますか？私はちょうどここにサンプルを置い ：http://bit.ly/TrcCdp

をUPDATE： 私のサンプルであり

がUPDATE：

はちょうどここに奇妙なロード結果をCTRL +更新を行なったし、 JSON配列には800個の要素が含まれていますので、私がそれを少なくすると分かります。例えば、600-700要素はパフォーマンスが良くなっていますが、とにかく800要素が必要です。それは約6秒にChromeの負荷を軽減しているだけで600要素....

がある場合

例えばので、おそらくノックアウトテンプレートを反復時点でどこかに問題がある可能性がありますか？