Question

技术：Angular v6，打字稿和SASS。

我的首页有CSS背景图片。这是一张大照片，似乎从来没有及时加载。

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%;

  }
}

他们可以尝试的任何技巧吗？以某种方式预加载图像。

我对此做了一次尝试：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  public backgroundImg = './assets/backgrounds/hero20.jpg';
}

如您所见，我尝试将其预加载到主app.component中。但这确实没有用。

Answer 1

是否可以将页面的该部分移至Angular应用之外并直接移至页面上？那将是肯定会导致它更早加载的一种选择。

除了我认为您可以在图像上实施更强的缓存外，这当然只会对非初始访问产生影响，我认为最好的选择是从Angular负载中删除它，或者着眼于压缩或优化网站上的图片：

https://compressor.io/

在Angular应用中更快地加载背景图像

1 个答案: