现象描述:刚进入页面,轮播图部门会出现2-3秒空白,然后后续就正常显示了;
框架:Angular+ NG-ZORRO-antd
解决思路:是由于自动切换的时间间隔导致空白,我设置了一个标识符,一开始false的时候,显示新加的一个设置不自动切换,时间间隔0的轮播图组件;页面加载完立即改变为true,再显示我原来的组件;
代码:
/**
* html 重点在于ngIf条件,如果init则显示时间间隔为5s的自动切换轮播图,
* 否则显示不自动切换时间间隔为 0的轮播图
*/
<nz-content class="left-images">
<nz-carousel *ngIf="init" #carousel [nzEffect]="effect" [nzAutoPlay]="true"
[nzDots]="false" [nzAutoPlaySpeed]="5000">
<div class="go" nz-carousel-content *ngFor="let index of array">
<div *ngIf="domain"><img [src]="index | imageUrl: defaultImg"></div>
<div *ngIf="!domain"><img src="{
{index}}"></div>
</div>
</nz-carousel>
<nz-carousel *ngIf="!init" #carousel [nzEffect]="effect" [nzDots]="false"
[nzAutoPlaySpeed]="0">
<div class="go" nz-carousel-content *ngFor="let index of array">
<div *ngIf="domain"><img [src]="index | imageUrl: defaultImg"></div>
<div *ngIf="!domain"><img src="{
{index}}"></div>
</div>
</nz-carousel>
</nz-content>
// ts代码 设置标识符,通过标识符来更改显示的组件
export class LoginComponent implements OnInit {
public init: boolean = false;
...... // 其他代码
ngOnInit() {
// 请求信息
this.systemSetupService.getSystemInfoByDomainName().then(data => {
const info: any = data;
this.init = true;
.... // 其他代码
})
}
}