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

第一个过程

离子模块，用于在后台线程中加载图像并将其缓存以供以后使用。使用Angular 4+中的HttpClient和来自离子原生包装器的cordova-plugin文件。

<强>安装

<强> 1。安装NPM包

npm install --save ionic-image-loader

<强> 2。安装必需的插件

npm i --save @ionic-native/file

离子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>

您还可以收听加载图像时要通知的加载事件：

<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}}" />

Ionic 3 Image懒人装载机

2 个答案: