Question

我正在构建离子3应用程序，它在页面中显示图像。问题是应用程序以丑陋的方式显示图像，显示从上到下加载的部分图像。

我在这个应用程序中想要实现的是，只有在完全下载后才能显示图像，最好是使用微调器。

以下是我使用的代码：

HTML：

<ion-header>
  <ion-navbar color="dark">
    <ion-title>APPNAME</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  <ion-list [virtualScroll]="categories">
  <ion-item *virtualItem="let category" class="itemcss">
      <ion-card (click)="category.golink()" class="wallcard">
          <img class='homecardimage' [src]="category.Url"/>
          <div class="card-title">{{category.Name}}</div>
        </ion-card>
  </ion-item>
</ion-list>
   </ion-content>

打字稿：

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams,AlertController,LoadingController,ActionSheetController } from 'ionic-angular';
    import { Network } from '@ionic-native/network';
    import {HomePage} from '../home/home';

    @IonicPage()
    @Component({
      selector: 'page-category',
      templateUrl: 'category.html',
    })
    export class CategoryPage {
    constructor(public navCtrl: NavController, public navParams: NavParams,private network: Network,public alertCtrl: AlertController,public loadingCtrl: LoadingController,public actionSheetCtrl: ActionSheetController) 
      {}
      categories = [
  { Name: 'Popular' ,Url:'Cloudinary Link',golink:()=>this.goPopular(Cloudinary Link,Data)},
{....................................................},
{.....................................................}
      ];

goPopular(uurl,data){
.............................
}
    ionViewDidLoad() {
        console.log('ionViewDidLoad CategoryPage');
        }

    }

我尝试使用不同的插件来实现这一目标。但是没有按预期工作。

有没有任何方法，只需在Ionic3中使用Typescript，CSS和HTML？

感谢。

Answer 1

您无法在img内使用Virtual Scroll标记。Ionic team可以使用is not recommended。

HTTP请求，图像解码和图像渲染可能导致jank 滚动时。为了更好地控制图像，Ionic提供 ion-img来管理HTTP请求和图像呈现。滚动时通过项目快速，ion-img知道何时何地不做请求，何时何地不呈现图像，只加载滚动后可以查看的图像

但如果您遇到ion-img问题，则需要使用InfiniteScroll。您可以在从服务器获取所有图片后将图像绑定到该文件。

仅在完全下载图像后显示图像

1 个答案: