A more cost-effective method to replicate an image multiple times using Angular

Question

A more cost-effective method to replicate an image multiple times using Angular

In the productivity tool I've created, there is a daily log of pomodoros completed. Each day's progress is displayed on a timeline with a tomato icon representing each pomodoro. To achieve this visual representation, I am using AngularJS directives, specifically ng-repeat, as depicted below:

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

(The range function simply consists of:

$scope.range = function(n) {return new Array(n)}

)

While this method works effectively, it tends to slow down for users who have numerous pomodoros recorded, especially when using Firefox. The performance lag is somewhat expected.

There are alternative approaches to address this issue (even considering the use of jQuery), but none appear to be as elegant or seamless. The data does not require frequent updates post-loading, although potential future enhancements may necessitate revisions based on user data. However, these updates can be easily triggered if needed.

javascript angularjs performance angularjs-ng-repeat

Answer 1

Answer №1

My recommendation is to change the <img> icon to a CSS-based format like:

<span class="tomato-icon"></span>

. This way, you will only need one image request regardless of how many icons are present.

You can use the following CSS code:

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

Answer 2

My recommendation is to change the <img> icon to a CSS-based format like:

<span class="tomato-icon"></span>

. This way, you will only need one image request regardless of how many icons are present.

You can use the following CSS code:

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

A more cost-effective method to replicate an image multiple times using Angular

Answer №1

Similar questions

Discovering dynamic content enclosed by static values in Applescript

I'm still searching for a proper solution on how to access JavaScript/jQuery functions within Colorbox

What is the best way to activate a function from a modal component without having the function embedded in Angular 14?

Issue with implementing setTimeout on await fetch() result

Incorporating a .json file into res.render to pass data

Importing a module directly from the umd distribution may yield a distinct outcome compared to importing it

Watching a VideoJS video does not pause even after closing a Bootstrap modal

Error: The function 'stepUp' was invoked on an object lacking the HTMLInputElement interface during an AJAX request

The function could not be invoked due to the absence of a defined $rootScope

Tips for modifying javascript code to have popups appear as bPopup instead of in a separate popup window

Utilize MaterialUI's stepper component to jazz up your design with

Using jQuery to select a div element that has been dynamically loaded using ajax, or inserted into the DOM using the html()

The issue with certain values not being filtered correctly in AngularJS

Unable to fetch the Observable value

What is the best way to customize the appearance of chosen selections in the MUI Autocomplete component?

Creating a Future Prediction Graph with ECharts

Execute a single test from a particular test suite using Jest

I never rely on the browser back button, I prefer to remain on the same page

Transform the size and convert an object from a picture into text based on the user's scrolling

Is it possible to utilize checkbox images for type="checkbox" in ng-repeat with AngularJS?