Ionic 3 图像懒加载器

Question

我正在开发使用外部图像文件的离子应用程序。这些图像加载到离子卡、离子项目、离子幻灯片等元素中。我需要一个微调器或某种技术来显示图像，直到图像成功。

我尝试了图像缓存插件，但没有成功。

期待更好的解决方案。

谢谢。

Answer 1

在你的 js 中定义加载图片，例如

loadingAnimation = "../../assets/img/loadingAnimation.gif";

然后使用 ||在 html 中设置源时的运算符：

<img [src]='{{ (yourActualPicture) || (loadingAnimation ) }}'/>

这样加载动画会一直显示，直到实际图片下载完毕。

附带说明：您可能想看看 Ionic 的 Spinner 组件 https://ionicframework.com/docs/api/components/spinner/Spinner/

Answer 2

你可以使用Ionic Image Loader实现这个问题展示直到图像成功

第一道工序

Ionic 模块在后台线程中加载图像并缓存它们以供以后使用。使用来自 Angular 4+ 的 HttpClient，并通过 ionic-native 包装器使用 cordova-plugin-file。

安装

1.安装 NPM 包

npm install --save ionic-image-loader

2。安装所需的插件

npm i --save @ionic-native/file

ionic cordova 插件添加 cordova-plugin-file 3.导入IonicImageLoader模块 在应用的根模块中添加 IonicImageLoader.forRoot()

import { IonicImageLoader } from 'ionic-image-loader';

// import the module
@NgModule({
  ...
  imports: [
    IonicImageLoader.forRoot()
  ]
})
export class AppModule {}

然后在您的子/共享模块中添加 IonicImageLoader

import { IonicImageLoader } from 'ionic-image-loader';

@NgModule({
  ...
  imports: [
    IonicImageLoader
  ]
})
export class SharedModule {}

用途

这段 HTML 代码演示了这个模块的基本用法：

<img-loader src="https://path.to/my/image.jpg"></img-loader>

默认情况下，模块将图像设置为元素的背景。如果你想让模块使用图片作为元素内部的标签，只需添加useImg属性，如下所示：

<img-loader src="https://path.to/my/image.jpg" useImg></img-loader>

你也可以在图片加载完成时监听 load 事件：

<img-loader src="path/to/image" (load)="onImageLoad($event)></img-loader>

import { ImgLoader } from 'ionic-image-loader';

...

onImageLoad(imgLoader: ImgLoader) {
  // do something with the loader
}

更多详情请访问link

第二道工序

在.ts中定义加载图片

defaultImage: string = "assets/img/animationImage.png";

然后在.html中使用逻辑或||运算符

<img  src="{{ your image || defaultImage}}" />