離子2 /離子3 /離子4：（懶惰）載重旋轉器的圖片

我使用離子-IMG在我的申請ionic2正確加載我的圖片。但是，我想知道是否有方法向用戶指示圖片實際上正在加載。離子2 /離子3 /離子4：（懶惰）載重旋轉器的圖片

謝謝你的幫助！

編輯：這裏是答案，如果你絕對需要使用離子img標籤。如果不是，建議您使用ionic-image-loader作爲AdminDev826。

我終於解決了這個問題與CSS！當圖像在離子2中加載時，ion-img標籤沒有任何類別。但是，當圖像最終加載時，ion-img標籤會獲得「img-loaded」類。

這裏是我的解決方案：

<ion-img [src]="img.src"></ion-img> 
    <ion-spinner></ion-spinner>

我的CSS：

.img-loaded + ion-spinner { 
    display:none; 
}

我希望它可以幫助別人！

來源

2016-08-09 Guillaume Le Mière

請使用離子圖像加載器插件

安裝NPM包
```
npm install --save ionic-image-loader 
```

安裝所需的插件

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模塊

應用程序的根模塊中添加IonicImageLoader.forRoot（）

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

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

然後你的孩子/共享模塊（S）

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

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

來源

2017-05-05 19:37:05 AdminDev826

請檢查此鏈接更多詳細信息 – AdminDev826

https://www.npmjs.com/package/ionic-image-loader – AdminDev826

我實際上使用它;-) 謝謝你這個新的答案！ –

我終於解決了這個問題與CSS！當圖像在離子2中加載時，ion-img標籤沒有任何類別。但是，當圖像最終加載時，ion-img標籤會獲得「img-loaded」類。

這裏是我的解決方案：

<ion-img [src]="img.src"></ion-img> 
    <ion-spinner></ion-spinner>

我的CSS：

.img-loaded + ion-spinner { 
    display:none; 
}

我希望它可以幫助別人！

來源

2016-08-09 09:02:45

您的解決方案是不是最好的之一，因爲該應用程序還下載所有的圖像，例如，在Facebook的應用程序一樣，您將下載所有從進料圖像到您的應用程序，這將讓一切都超慢。

使用此： https://github.com/NathanWalker/ng2-image-lazy-load

來源

2016-10-31 05:30:43

這取決於你如何使用這些代碼中添加IonicImageLoader。在Facebook風格的應用程序，只需使用以下內容：https://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/ –

@Yossi Neiman你有一個例子，我可以如何使用ng2-image-在ionic2應用中延遲加載？ –

如果你想使用img標籤，而不是ion-img這裏是解決方案：

<img src="{{image.src}}" (load)="loaded = true" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="image_exists" /> 
    <ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner>

在你的CSS文件，你應該寫如下：

.img-loaded + ion-spinner { 
    display:none; 
} 
// .center in my case to make the spinner at the center 
.center{ 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
}

loaded是你在你的組件來定義一個布爾變量。

來源

2017-04-01 06:30:36

謝謝你的其他答案！ ;-) –

歡迎，我希望你找到有用的:) –

離子2 /離子3 /離子4：（懶惰）載重旋轉器的圖片

回答

相關問題