角度を付けてn回画像を複製する安価な方法

Question

my productivity appには、毎日行ったポモドローの数が記録されています。これはタイムライン上の各日に表示され、各ポモドーロの小さなトマトアイコンが表示されます。ここに示したように、私は、日ごとにng-repeatを使用して、画像のためのng-repeatよ：

<img ng-repeat="p in range(day.pomosDone) track by $index" src='/img/pomodoro.png'> 

（レンジ機能は、単にこれです：$scope.range = function(n) {return new Array(n)}）

をこれは、ユーザーとのことを除いて、完全に正常に動作します毎日たくさんのポモドーロを持っている人は、ロードするのが本当に遅いです（特に、firefoxではそうです）。この種の意味があります。

私はこれを行うための他の多くの方法（浮気とjQueryの使用を含む）を考えることはできますが、どれも特にエレガントで自然なように見えません。読み込み後は変更する必要はほとんどありませんが、ユーザーがデータを更新した場合、将来的には変更したくなるかもしれません。しかし、私はそれを再トリガーすることができます。

Answer 1

<img>アイコンをCSSベース（<span class="tomato-icon"></span>など）に変換することをお勧めします。そのため、画像のリクエスト数は1つだけです。

CSSは次のようなものになるだろう：あなたは、最小限の例を提供することが期待再質問をしたときに、あなたのサイトにリンクしていない

.tomato-icon { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    line-height: 16px; 
    background: url(path to your tomato icon) no-repeat; 
}