Utilizing Angular v6, typescript, and SASS for my project. A CSS background image is set for the homepage, however, it's a large photo that always takes too long to load.
Custom CSS:
@import '../../../scss/variables';
:host {
.wrapper {
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url($hero-background) no-repeat;
background-size: 100%;
}
}
Are there any techniques or tricks I can implement to improve the loading time, like preloading the image?
I've made one attempt at this:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public backgroundImg = './assets/backgrounds/hero20.jpg';
}
My initial approach was to preload the image in the main app.component, but it didn't yield the desired results.