Ionic 4 加载直到页面中的图像加载

Question

enter image description here我正在使用 ionic 4，所以我需要加载程序直到页面完全加载。现在我正在使用 loadingController 并在 api res 时关闭它，加载完成但图像仍在加载。我要加载直到所有加载完成。

喜欢 ionic 3 ionViewDidLoad() 工作下面是我在离子文档中找到的答案，一个名为 ionImgWillLoad 的事件，但不知道如何使用它。

Answer 1

最接近ionViewDidLoad的可能是ionViewDidEnter。请参阅下面的生命周期事件：

Answer 2

Ionic 4 更多地依赖于 Angular 生命周期挂钩，而不是 ionViewDidLoad 你现在应该使用 ngAfterViewInit 挂钩。

视图初始化意味着视图的布局和组件的渲染已经完成，但是图像异步加载仍然可以进行。

Ionic 3 中的 ionViewDidLoad 也没有等待图像加载。要拥有这样的 "hook" 需要自定义实现。

在打字稿中，类似下面的内容可以解决问题：

counter: number;
maxImagesCount: number = document.images.length;

updateCounter() {
    this.counter++;
    if ( this.counter === this.maxImagesCount ) {
        console.log( 'All images loaded!' );
    }
}

在模板中，您可以将加载事件侦听器附加到图像模板：

<img src="url" (load)="updateCounter()">

Ionic 4 加载直到页面中的图像加载

Ionic 4 loading until images in page loaded

ionic-framework

ionic4