解决刚进入页面时轮播图会出现短暂空白的问题

现象描述:刚进入页面,轮播图部门会出现2-3秒空白,然后后续就正常显示了;

框架:Angular+ NG-ZORRO-antd

解决思路:是由于自动切换的时间间隔导致空白,我设置了一个标识符,一开始false的时候,显示新加的一个设置不自动切换,时间间隔0的轮播图组件;页面加载完立即改变为true,再显示我原来的组件;

代码:

/**
 * html 重点在于ngIf条件,如果init则显示时间间隔为5s的自动切换轮播图,
 * 否则显示不自动切换时间间隔为 0的轮播图
*/


    
        
// ts代码 设置标识符,通过标识符来更改显示的组件

export class LoginComponent implements OnInit { 


    public init: boolean = false;

    ......  // 其他代码

    ngOnInit() {
    
        // 请求信息
        this.systemSetupService.getSystemInfoByDomainName().then(data => {
            const info: any = data;
            this.init = true;
            .... // 其他代码
        })


    }
}

 

你可能感兴趣的:(Angular,NG-ZORRO,前端技术)