Производительность CSS-спрайтов ⇐ CSS

[Anonymous]

У меня есть статическое изображение 500x640, находящееся в папке, состоящее из частей 20x20 со спрайтами CSS, я устанавливаю фоновую позицию для отображения каждой части, мне нужен такой вид отображения, чтобы иметь возможность позже манипулировать каждой частью.
css:

Код: Выделить всё

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

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

js:

Код: Выделить всё

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);

function div(val, by){
return (val - val % by) / by;
}

Поэтому у меня проблемы с производительностью.
Например, в Opera и FF изображения загружаются очень быстро, около 1 секунды, в IE около 3 секунд, но в Chrome они загружаются очень медленно.


для отображения всех требуется около 17 секунд. фрагменты в Chrome...
Браузер выполняет всего один запрос, чтобы получить изображение, а затем вырезает из него небольшие фрагменты, почему в Chrome это может занять так много времени?
Можно ли как-нибудь повысить производительность?


только что нажал CTRL+Обновить, и вот странный результат загрузки:


ОБНОВЛЕНИЕ:
В моем образце есть массив JSON, он содержит 800 элементов, поэтому я просто проверяю, получится ли у меня это сделать меньше, например 600-700 элементов, производительность становится лучше, но мне все равно нужно 800 элементов.
например, когда есть только 600 элементов, это снижает нагрузку в Chrome примерно до 6 секунд....
Так что, возможно, проблема может быть где-то в том месте, где шаблон итерации выбивается?

Подробнее здесь: https://stackoverflow.com/questions/121 ... erformance