在Angular 7中，在更改路由之前加载图像，可以使用PreloadAllModules加载所有模块，并在路由切换之前加载图像。下面是一个示例代码：

1. 首先，确保你已经安装了@angular/router和rxjs依赖包。

2. 在app.module.ts文件中，导入PreloadAllModules和RouterModule模块，并在imports数组中配置PreloadAllModules：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, PreloadAllModules } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在app.component.html文件中，添加一个标签以加载图像：

4. 在app.component.ts文件中，使用NavigationStart事件监听路由的开始导航，并在处理事件时显示图像：

import { Component } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

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

  constructor(private router: Router) {
    router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        this.showImage = true;
      }
    });
  }
}

5. 在app.component.css文件中，为图像添加CSS样式，以便在加载时可见：

img {
  display: block !important;
}

这样，当路由切换时，图像将在页面加载期间显示出来。