lazyload image from sass

[babarogic]

Here is my code and issue
app.component.rs

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';
import { LazyLoadImageModule } from 'ng-lazyload-image';
import { AppComponent } from './app.component';
import { RiseSpeakComponent } from './rise-speak/rise-speak.component';
import { SplashComponent } from './splash/splash.component';
import { Problem1Component } from './problem1/problem1.component';
import { Problem2Component } from './problem2/problem2.component';
import { SolutionComponent } from './solution/solution.component';
import { MarketReadyComponent } from './market-ready/market-ready.component';
import { OurAimComponent } from './our-aim/our-aim.component';
import { FunctionalDiagramComponent } from './functional-diagram/functional-diagram.component';
import { AnimationService } from './animation.service';
import { VideoComponent } from './video/video.component';
import { ValueComponent } from './value/value.component';
import { ExistMarketComponent } from './exist-market/exist-market.component';
import { MarketSizeComponent } from './market-size/market-size.component';
import { ProductFunnelComponent } from './product-funnel/product-funnel.component';
import { SetupGrowthComponent } from './setup-growth/setup-growth.component';
import { BusinessModelComponent } from './business-model/business-model.component';
import { RevenueModelComponent } from './revenue-model/revenue-model.component';
import { GoMarketComponent } from './go-market/go-market.component';
import { TeamComponent } from './team/team.component';
import { WhereComponent } from './where/where.component';
import { PhraseComponent } from './phrase/phrase.component';
import { ThankYouComponent } from './thank-you/thank-you.component'
import { IdentityComponent } from './identity/identity.component'

const APP_ROUTES: Routes = [
  {pathMatch: 'full', path: '', component: SplashComponent},
  {path: 'rise-speak', component: RiseSpeakComponent},
  {path: 'problem-1', component: Problem1Component},
  {path: 'problem-2', component: Problem2Component},
  {path: 'solution', component: SolutionComponent},
  {path: 'market-ready', component: MarketReadyComponent},
  {path: 'our-aim', component: OurAimComponent},
  {path: 'functional-diagram', component: FunctionalDiagramComponent},
  {path: 'video', component: VideoComponent},
  {path: 'value', component: ValueComponent},
  {path: 'exist-market', component: ExistMarketComponent},
  {path: 'market-size', component: MarketSizeComponent},
  {path: 'product-funnel', component: ProductFunnelComponent},
  {path: 'setup-growth', component: SetupGrowthComponent},
  {path: 'our-7-ps', component: BusinessModelComponent},
  {path: 'revenue-model', component: RevenueModelComponent},
  {path: 'go-market', component: GoMarketComponent},
  {path: 'team', component: TeamComponent},
  {path: 'where', component: WhereComponent},
  {path: 'phrase', component: PhraseComponent},
  {path: 'thank-you', component: ThankYouComponent},
  {path: 'identity', component: IdentityComponent},

  {path: '**', redirectTo: ''},
]

@NgModule({
  declarations: [
    AppComponent,
    RiseSpeakComponent,
    SplashComponent,
    Problem1Component,
    Problem2Component,
    SolutionComponent,
    MarketReadyComponent,
    OurAimComponent,
    FunctionalDiagramComponent,
    VideoComponent,
    ValueComponent,
    ExistMarketComponent,
    MarketSizeComponent,
    ProductFunnelComponent,
    SetupGrowthComponent,
    BusinessModelComponent,
    RevenueModelComponent,
    GoMarketComponent,
    TeamComponent,
    WhereComponent,
    PhraseComponent,
    ThankYouComponent,
    IdentityComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    LazyLoadImageModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(APP_ROUTES)
  ],
  providers: [ AnimationService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

rise-speak.component.ts

import { Component, OnInit } from '@angular/core';
import { routerTransition } from "./../router.animations";
import { AnimationService } from "./../animation.service"

@Component({
  selector: 'app-rise-speak',
  templateUrl: './rise-speak.component.html',
  styleUrls: ['./rise-speak.component.sass'],
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''} 
})
export class RiseSpeakComponent implements OnInit {
  
  current: number = 2;

  constructor(private animationService: AnimationService) { }

  ngOnInit() {
    this.animationService.navigation() 
  }  
}

rise-speak.component.html

<div id="rise-speak" class="ng-lazyloaded">
  <div class="wrapper appear">
    <ul class="menu">
      <li class="up" routerLink="" (click)="this.animationService.disappear()"><img src="/pitchdeck2/assets/images/up-arrow.png" alt="up-arrow"/></li>
      <li class="current">{{this.current}}</li>
      <li class="total">18</li>
      <li class="down" routerLink="/video" (click)="this.animationService.disappear()"><img src="/pitchdeck2/assets/images/down-arrow.png" alt="down-arrow"/></li>
    </ul>
    <h2 class="logo" routerLink="" (click)="this.animationService.disappear()">wowlectures</h2>
    <h1 class="titleBig">RISE AND SPEAK</h1>
  </div>
</div>

rise-speak.component.sass

@import './../../assets/sass-tools/tools.sass'

#rise-speak
    position: fixed
    width: 100%
    height: 100%
    background-image: url(/assets/images/rise-speak.jpg)
    background-size: cover
    
    h1.title
        position: absolute
        left: 2%
        bottom: 30%
        color: $w
        font-size: 65px
        font-weight: lighter

how to lazyload background-image from sass?

[tjoskar]

Hi,
I guess it is /assets/images/rise-speak.jpg that you want to lazy load?

Try to change:

rise-speak.component.html
from: <div id="rise-speak" class="ng-lazyloaded"> to: <div id="rise-speak" lazyLoad="/assets/images/rise-speak.jpg">

and remove background-image: url(/assets/images/rise-speak.jpg) from rise-speak.component.sass

[babarogic]

When removing background-image in sass, then nothing is loaded, i am not sure about that.

adding lazyload="/assets/images/rise-speak.jpg maybe is the solution

[tjoskar]

@gbabarogic did you come up with a solution?