The continuous invocation of the ngStyle background-image in Angular 4 is causing a decrease in the loading speed of the page

I'm currently working on an Angular CLI Project

  "@angular/cli": "^1.1.1",
  "@angular/compiler-cli": "^4.0.0",

In order to dynamically load images from the assets folder within an ng-for loop, I am using the following line of code:

[ngStyle]="{'background-image': 'url(\'' + getPackageImage(package) + '\')'}

This functionality is implemented in the Component.ts file:

public getPackageImage(tPackage: any) {
    return this.tpService.getImageFor(tPackage);
}

And the service responsible for fetching the image path is located in Service.ts:

public getImageFor(tPackage: TourPackage) {
    return "/assets/images/tour-packages/" + tPackage.name + "/image.jpg";
}

While the images are loading correctly, the page tends to slow down as the number of images increases.

Each time I scroll, the getPackageImage function is called multiple times which impacts the performance of the UI. Is there a solution to optimize this process?

Interestingly, hardcoding the image URLs directly in the CSS results in better page performance.

To showcase the issue, I have temporarily hosted the project on Firebase - Firebase link demonstrating the problem

cssangulartypescript

Answer №1

Just like @developer033 mentioned:

imagePath: string;
ngOnInit() {
  this.imagePath = this.packageService.getImageUrl(this.selectedPackage);
}

HTML:

[ngStyle]="{'background-image': 'url(\'' + imagePath + '\')'}"

Answer №2

An issue arose due to using high resolution images such as 8k and 4k resized to fit into a 300 x 300 div.

This caused the page to become unresponsive.

After resizing the images, the sluggishness disappeared.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

My goal is to have the footer remain at the bottom of the page, which I achieved using the following CSS: position: absolute; bottom: 0px; While this code does bring the footer to the bottom as desired, the issue arises when the window is resized to a sm ...

c#asp.netcssasp.net-mvc-3footer

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

javascripthtmlcsshtml-select

Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Is there a way to achieve alternating row shading within a wrapped paragraph element without using the :nth-child technique? For instance, if we have: <p style="width:100px;"> row 0 -- hello row 1 -- world row 2 -- !!! </p> Some brow ...

css

Creating adaptable background images with fullpage.js

I'm currently utilizing fullpage.js for parallax scrolling. I'm wondering if there's a way to make the background images adjust responsively when I resize my window. Check out the documentation here: https://github.com/alvarotrigo/fullPage. ...

javascriptjquerycssfullpage.js

Shifting the "active" designation within a dropdown menu to correspond with the user's current page

Recently, I decided to explore the Foundation framework. However, my first stumbling block was figuring out how to use the "active" class in a dropdown menu. I am hoping to have the class applied to the page link that is currently being viewed by the user ...

jquerycsszurb-foundationzurb-foundation-5

Issues with Angular ng-bootstrap tabset component not functioning as expected

{ "name": "ModalWindow", "version": "1.0.0", "repository": { "type": "git", "url": "" }, "scripts": { "build": "webpack --mode production", "start": "webpack-dev-server --mode development --open" }, "license": "MIT", "depend ...

angulartypescriptangular5ng-bootstrap

Tips for capturing an error generated by a child component's setter?

I've created an App component that contains a value passed to a Child component using the @Input decorator. app.component.html <app-child [myVariable]="myVariable"></app-child> app.component.ts @Component(...) export class AppC ...

javascriptangulartypescript

Continue looping in Javascript until an empty array is identified

Currently, I am in search of a solution to create a loop in Javascript that continues until the array of objects is empty. The object I am working with looks like this: "chain": { "evolves_to": [{ "evolves_to": [{ ...

javascriptjsontypescriptvue.jsforeach

Executing an AngularJS function using regular JavaScript code

I am currently working with AngularJS and Typescript. I have integrated an external library into my project and now I need to call an AngularJS method from that library, which is written in vanilla JavaScript. I tried following this example, but unfortunat ...

javascriptangularjstypescript

Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

https://i.sstatic.net/EEC2U.png I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked m ...

jquerycss

Exploring the World of Angular2 Interfaces

Just starting out with Angular 2 and I'm wondering if anyone can provide a clear explanation of the interface concept in Angular 2. It would be really helpful for me if you could explain it with a working example. Additionally, I would appreciate som ...

angulartypescript

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

Angular material tables are displaying borders that do not extend the full length

I am currently working on designing a visually appealing table. Due to the upcoming content in the matrix section, I am unable to make the table smaller for mobile devices. Therefore, I have added overflow:auto to enable a scroll-bar. The issue I am facin ...

htmlcssangular

Adding a logo to a website that utilizes CSS, HTML, JS, and Bootstrap

Hey there! I'm new to the world of Front-end development and I've been learning by watching videos and reading everything I can find on the Internet. Currently, I'm using HTML, CSS, and JS for my website. Can anyone help me figure out how to ...

javascripthtmlcssheader

Can the individual headers of an ag-grid column be accessed in order to apply an on-mouseover event with a specific method?

In my current project, I am utilizing ag-grid to create a dynamic web-application that combines tools from various Excel files into one cohesive platform. One of the Excel features I am currently working on involves displaying a description when hovering ...

angularhtmlcssag-grid

Guide to setting a white background color specifically for a lightbox in Angular

I want to change the background-color to white for my gallery items. Currently, I am using the following code to open the full-screen view: this.lightbox.open(0, 'lightbox1', { panelClass: 'fullscreen'}) Can someone please guide me on ...

cssangulartypescript

What is the best way to send an enum from a parent component to a child component in

I'm trying to send an enum from a parent component to a child component. This is the enum in question: export enum Status { A = 'A', B = 'B', C = 'C' } Here's the child component code snippet: @Component({ ...

angulartypescript

Error: The background image is not displaying correctly on the .net webpage

I have included a link to an image but I am having trouble getting it to show up on my website. I even tried putting the image in a different folder, but still no luck with displaying it. Any assistance on this matter would be greatly appreciated. I hav ...

htmlcssbootstrap-4

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

What are the recommended best practices for displaying loading indicators, alerts, and logs in Ionic2?

Seeking the most effective way to handle loadings, alerts, and console logs in Ionic2. Instead of duplicating the following code on every page, I want to be able to call it just once. Here is an example code snippet for showing loading: showLoading() ...

angulartypescriptionic2