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

Question

我正在构建在页面中显示图像的 ionic 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>

typescript :

    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

您不能在 Virtual Scroll 中使用 img 标签。它 is not recommended由 Ionic 团队。

HTTP requests, image decoding, and image rendering can cause jank while scrolling. In order to better control images, Ionic provides ion-img to manage HTTP requests and image rendering. While scrolling through items quickly, ion-img knows when and when not to make requests, when and when not to render images, and only loads the images that are viewable after scrolling

但是如果您对 ion-img 有疑问，那么您需要使用 InfiniteScroll .从服务器获取所有图片后，就可以将图片绑定(bind)到它了。