Image loader like Whatsapp Application in ionic 3

Whatsapp Application Ionic3 Image Loader

By Code solution
Jan 20th, 2021
0 comments
1

Image3 image loader using lazy loader and image caches. image loader like Whatsapp application in ionic 3.

Create a project run this command:

ionic start <project name> blank --type ionic1

then move into the newly created directory:

cd <project name>

Install required js and CSS file

npm install --save imgcache.js --save
ionic cordova plugin add cordova-plugin-file --save
npm install --save @ionic-native/file
ionic cordova plugin add cordova-plugin-device --save
npm install --save @ionic-native/device
ionic cordova plugin add cordova-plugin-file-transfer --save
npm install --save @ionic-native/file-transfer
npm install --save @chrisben/imgcache.js

Open app.js in src ->app-> app.module.ts and add code

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { OfflineApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { LazyImgComponent }   from '../global/components/';

import { LazyLoadDirective }   from '../global/directives/';

import { ImgcacheService }    from '../global/services/';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    OfflineApp,
    HomePage,
    LazyImgComponent,
    LazyLoadDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(OfflineApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    OfflineApp,
    HomePage,
    LazyImgComponent
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ImgcacheService,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

Open app.js in src ->app->app.component.ts and add code

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ImgcacheService } from '../global/services';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class OfflineApp {

  @ViewChild('nav') nav: Nav;

  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
              imgcacheService: ImgcacheService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      // initialize imgCache library and set root
      imgcacheService.initImgCache().then(() => {
        this.nav.setRoot(this.rootPage);
      });
    });
  }
}

Open app.js in src ->home-> home.html and add code

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>

    <ion-item>
      <ion-avatar item-left>
         <lazy-img inputSrc="http://codesolution.co.in/assets/uploads/codeicon.png"></lazy-img>
      </ion-avatar>
      <a href="http://codesolution.co.in/" target="blank">CodeSolution</a>
      <p>in code we trust</p>
    </ion-item>

    <lazy-img inputSrc="http://codesolution.co.in/assets/uploads/codeicon.png"></lazy-img>

    <ion-card-content>
      <p>Images above have been cached. Try turning on the airplane mode and let Imgcache.js do the magic!</p>
    </ion-card-content>

  </ion-card>
  <ion-card>
    <ion-item>
      <ion-avatar item-left>
         <lazy-img inputSrc="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg"></lazy-img>
      </ion-avatar>
      <a href="http://codesolution.co.in/" target="blank">CodeSolution</a>
      <p>in code we trust</p>
    </ion-item>

    <lazy-img inputSrc="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg"></lazy-img>

    <ion-card-content>
      <p>Images above have been cached. Try turning on the airplane mode and let Imgcache.js do the magic!</p>
    </ion-card-content>

  </ion-card>
  <ion-card>
    <ion-item>
      <ion-avatar item-left>
         <lazy-img inputSrc="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></lazy-img>
      </ion-avatar>
      <a href="http://codesolution.co.in/" target="blank">CodeSolution</a>
      <p>in code we trust</p>
    </ion-item>

    <lazy-img inputSrc="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></lazy-img>

    <ion-card-content>
      <p>Images above have been cached. Try turning on the airplane mode and let Imgcache.js do the magic!</p>
    </ion-card-content>
</ion-card>
<ion-card>
    <ion-item>
      <ion-avatar item-left>
         <lazy-img inputSrc="https://st.hzcdn.com/simgs/38034d44081b02b3_3-5174/sudarshan_vis.jpg"></lazy-img>
      </ion-avatar>
      <a href="http://www.ninjadevs.io" target="blank">NinjaDevs.io</a>
      <p>in code we trust</p>
    </ion-item>

    <lazy-img inputSrc="https://st.hzcdn.com/simgs/38034d44081b02b3_3-5174/sudarshan_vis.jpg"></lazy-img>

    <ion-card-content>
      <p>Images above have been cached. Try turning on the airplane mode and let Imgcache.js do the magic!</p>
    </ion-card-content>
</ion-card>

</ion-content>

Image loader like WhatsApp application code is done you add platform in your application code platform add command:

ionic cordova platform add android/ios/windows

Create ios build add code in config.xml file

<access origin="*" />

<access origin="cdvfile://*" />

<allow-intent href="cdvfile://*" />

<feature name="Device">

<param name="ios-package" value="CDVDevice" />

<param name="android-package" value="org.apache.cordova.device.Device" />

</feature>

<feature name="File">

<param name="ios-package" value="CDVFile" />

<param name="android-package" value="org.apache.cordova.file.FileUtils" />

</feature>

<feature name="FileTransfer">

<param name="ios-package" value="CDVFileTransfer" />

<param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" />

</feature>

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github link: https://github.com/Sudarshan101/ionic3imageloader

See Demo: https://www.youtube.com/watch?v=r2P-TgRI1D4

thank you

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment