Ionic 2/Ionic 3/Ionic 4 : (Lazy) 加载图片的微调器 [英] Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) Loading spinner for pictures
问题描述
我在 ionic2 应用程序中使用 ion-img 来正确加载我的图片.但是,我想知道是否有一种方法可以向用户表明图片实际上正在加载.
I'm using ion-img in my ionic2 application to load my pictures correctly. However, I wonder if there is a way to indicate to the user that the picture is actually loading.
感谢您的帮助!
如果您绝对需要使用 ion-img 标签,这里是答案.如果没有,您应该使用 ionic-image-loader 作为 AdminDev826 建议.
EDIT : Here is the answer if you absolutely need to use the ion-img tag. If not, you should use ionic-image-loader as AdminDev826 suggested.
我终于用 CSS 解决了这个问题!当图像在 ionic 2 中加载时, ion-img 标签没有任何类.然而,当最终加载图像时, ion-img 标签获得类img-loaded".
I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".
这是我的解决方案:
<ion-img [src]="img.src"></ion-img>
<ion-spinner></ion-spinner>
还有我的 CSS :
.img-loaded + ion-spinner {
display:none;
}
我希望它可以帮助某人!
I hope it can help someone!
推荐答案
请使用ionic-image-loader插件
Please use ionic-image-loader plugin
安装 NPM 包
Install the NPM Package
npm install --save ionic-image-loader
安装所需的插件
Install Required Plugins
npm i --save @ionic-native/file
ionic plugin add cordova-plugin-file --save
npm i --save @ionic-native/transfer
ionic plugin add cordova-plugin-file-transfer --save
导入 IonicImageLoader 模块
Import IonicImageLoader module
在应用的根模块中添加 IonicImageLoader.forRoot()
Add IonicImageLoader.forRoot() in your app's root module
import { IonicImageLoader } from 'ionic-image-loader';
// import the module
@NgModule({
...
imports: [
IonicImageLoader.forRoot()
]
})
export class AppModule {}
然后在您的子/共享模块中添加 IonicImageLoader
Then add IonicImageLoader in your child/shared module(s)
import { IonicImageLoader } from 'ionic-image-loader';
@NgModule({
...
imports: [
IonicImageLoader
]
})
export class SharedModule {}
这篇关于Ionic 2/Ionic 3/Ionic 4 : (Lazy) 加载图片的微调器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!