更便宜的方法使用角度複製圖像n次

在my productivity app中有一天記錄了您每天做多少番茄湯。然後會在您的時間線上顯示每一天，每個番茄鍾都有一個小番茄圖標。我使用ng-repeat的每一天，然後ng-repeat的圖像，如下所示：更便宜的方法使用角度複製圖像n次

<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），但沒有一個看起來特別優雅或自然。它大多不需要在加載後進行更改，但我猜想如果用戶更新其數據，將來可能會需要更改。但我可以重新觸發這一點。

來源

2016-11-29 MalcolmOcean

要求您重新預計可提供小例子，問題時，不鏈接到你的網站...

你確定你真的想重複幾十個圖像，當用戶有這麼多的活動？這聽起來很混亂。我想也許這個問題是一個設計/用戶界面問題的症狀。重新設計將解決角度問題。 – ryanyuyu

@ryanyuyu Nah我認爲它作爲視覺量是有意義的。一種離散的條形圖。我對設計感到很滿意。 – MalcolmOcean

我建議您將<img>圖標轉換爲基於css的圖標，如：<span class="tomato-icon"></span>，因此無論您擁有多少圖片，它只會產生一個圖片請求。

CSS會是這樣的：

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

來源

2016-11-29 23:20:41 Adrianopolis

如果您在同一個網址上放置10個img標籤 - 瀏覽器無論如何都會發送1個請求。 –

如果爲服務器緩存設置了正確的標頭，則這是正確的。 – Adrianopolis

更便宜的方法使用角度複製圖像n次

回答

相關問題